前端导出word文档
1234567891011121314151617181920212223242526272829303132333435363738function exportWord(css, html, fname, type='application/msword'){ const htmlDom = `<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>${css}</styl ...
typescript的学习记录
ts的准备工作
什么是tsTypeScript是JavaScript的超集，因为它扩展了JavaScript，有JavaScript没有的东西。硬要以父子类关系来说的话，TypeScript是JavaScript子类，继承的基础上去扩展。为什么要用ts简单来说就是因为JavaScript是弱类型, 很多错误只有在运行时才会被发现而TypeScript提供了一套静态检测机制, 可以帮助我们在编译时就发现错误ts的特点支持最新的JavaScript新特特性支持代码静态检查支持诸如C,C++,Java,Go等后端语言中的特性 (枚举、泛型、类型转换、命名空间、声明文件、类、接口等)
安装1npm i -g typescript
编译生产js1tsc index.ts
不编译直接运行安装一个工具 npm i -g ts-node
1ts-node index.ts
ts的语法声明变量并给它指定类型1let a: number = 3
类型的别名用type定义一个类型的别名
12type mytype = 1 | 2 | 3let x: mytype = 1
函数的类型声明声明参数的 ...
vscode配置解读
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758{ "breadcrumbs.enabled": true, // 面包屑 "editor.renderControlCharacters": false, // 控制编辑器是否显示控制字符 "editor.fontSize": 16, // 字体大小 "editor.tabSize": 4, // tab大小 "editor.wordWrapColumn": 120,// 在 #editor.wordWrap# 为 wordWrapColumn 或 bounded 时，控制编辑器的折行列。 "editor.detectIndentation": false,//控制在基于文件内容打开文件时是否自动检测 #ed ...
hexo入门--用hexo搭建一个自己的博客网站真香
作为一个前端一开始想不用框架，自己开发搭建一个博客网站，后来发现hexo真香。
了解学习hexo的使用方式安装hexo1npm install -g hexo-cli
初始化项目1hexo init myblog
选一个比较好看的主题安装查阅了很多文章，知乎上有篇文章写的比较好。总结下推荐3款：butterfly、shoka、kaze
我选了比较流行的butterfly，根据butterfly的文档将其安装到项目里
将butterfly的配置文件内容复制到_config.butterfly.yml中，_config.butterfly.yml的优先级高，这样可以避免butterfly升级后带来的不必要的麻烦。
附：hexo官网butterfly官网
hexo常用基本命令12345hexo g # 生成静态文件hexo new abc # 生成文章，会在source/_posts目录下生成一个abc.md文件hero new page about # 生成页面hexo server # 启动本地服务hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 ( ...
Linux下jenkins的安装与配置
安装jenkins上jenkins官网查看其安装方法 https://www.jenkins.io/zh/download/第一次选了稳定版，但是在装插件的过程中出现插件不适应于当前版本的问题（稳定版更新较慢），遂将其卸载，安装了定期发布版。安装命令如下：
12345678# 下载repo 文件sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo# 导入公钥sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key# 安装jdk，本人试了装其他低版本的jdk会有问题，后改为Jenkins官网推荐的版本yum install fontconfig java-11-openjdk# 安装jenkinsyum install jenkins
启动jenkins12345service jenkins startservice jenkins restart # 重启service jenkins stop # ...
linux下安装nginx
作为一个前端，阿里云买台服务器能干啥，可以搭建一下自己的个人博客。首先需要安装个nginx
1.我是如何安装的找了一种最简单的方式，傻瓜式的自动安装依赖
1yum install nginx
2.nginx的基本命令启动服务：nginx
退出服务：nginx -s quit
强制关闭服务：nginx -s stop
重载服务：nginx -s reload（重载服务配置文件，类似于重启，但服务不会中止）
验证配置文件：nginx -t （可以查看配置文件的所在位置及状态）ngint -t 会看到以下两句
12nginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: configuration file /etc/nginx/nginx.conf test is successful
3.修改配置文件vim /etc/nginx/nginx.conf
配置文件的内容如下，在项目使用中，使用最多的三个核心功能是静态服务器、反向代理、负载均衡。均是通过修改配置文件实现。
123 ...
vue项目打包优化---首屏优化
目标：打出的包体积更小！
1.先分析一下打出的包到底什么占空间安装分析插件
1yarn add webpack-bundle-analyzer -D
在vue.config.js中添加配置
1234567891011121314module.exports = { chainWebpack: (config) => { /* 添加分析工具*/ if (process.env.NODE_ENV === 'production') { if (process.env.npm_config_report) { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) ...
用gulp4.0搭建一个项目
框架发展到现在，建一个项目用脚手架按照提示一步步操作就创建好了。但如果不用脚手架，还有gulp这种简单的工具，可以很方便的搭起来一个项目。gulp功能也挺强的，学习成本较低。本文介绍用gulp4.0搭建一个可以自动编译sass、处理js、启动服务的项目。
准备安装gulp命令行工具1npm install --global gulp-cli
创建项目并进入1npx mkdirp my-project
1cd my-project
初始化package.json1npm init
安装gulp，作为开发时依赖项1npm install --save-dev gulp
创建gulpfile.js项目结构
编写gulpfilegulp4.0语法和之前的有些不同。
创建任务每个function都是一个任务，任务分为公开任务和私有任务，未导出就是私有任务，导出就是公开任务。function必须接受一个callback作为参数，或者return出stream、promise、event emitter、child process、 observable这五种类型的一个值。
123456789fun ...
结合el-tree和el-transfer做一个树形穿梭框
项目中有个需求是树形穿梭框，element的穿梭框又不支持，所以得想办法。看到一个大佬改造el-transfer的方案，受到很多启发。记录一下自己改造的过程。
1.拷贝el-transfer的源码放到项目中
我用的element的版本是2.15.7（不同版本的源码可能不一样），vue的版本是2.6.11。
具体步骤是在github上搜索element，下载tag是2.15.7的源码zip包，解压，拷贝packages/transfer/src中的vue文件，放到项目的components/tree-transfer目录。
将main.vue文件名改为index.vue方便引用
在项目中引用拷贝的transfer源码的组件，效果和使用el-transfer效果一致
12345678910111213141516171819202122232425262728293031323334353637<my-el-tree-transfer v-model="treeChecked" :data="treeData& ...
nvm或者n管理node版本
使用nvm管理node版本安装要学会看文档，这个时候就体现到英文的重要性了。打开github把文档仔细读一读。
1sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
或者
1sudo wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
执行完第一步的安装命令，此刻执行nvm并不生效啊，提示找不到命令。nvm command not found
官网上说安装完nvm就会添加以上代码到.zshrc中，但是并没有啊，仔细阅读文档下面有mac不生效的解决办法，balabala，但是英文没那么好，看的一知半解啊。
需要手动添加以下代码到.zshrc中12export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HO ...