我在项目中是这样配置 Vue 的
独在公司加夜班,行行代码心甚寒。
不知功能何时完,杀了产品来祭天。
公司前端项目比较多,每个团队都会自己搭建一套属于自己团队的项目框架,导致公司项目五花八门,跨团队协作难上加载,所以小编整理了一个开箱即用的框架,用于统一所有的团队,那这个框架是怎么配置的呢,我们一起来看看。
本文内容来源于小编开源的一个基于
vant
封装的开箱即用框架的一部分,本文中提取了部分功能,完整代码,请查看 https://github.com/snowzijun/vue-vant-base
启用压缩,让页面加载更快
在我们开发的时候,为了方便调试,我们需要使用源码进行调试,但在生产环境,我们追求的更多的是加载更快,体验更好,这时候我们会将代码中的空格注释去掉,对待吗进行混淆压缩,只为了让js
,css
文件变得更小,加载更快。但只是这样做是不够的,我们还可以做得更极致。
gzip
是Web
世界中使用的最为广泛的文件压缩算法,当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome)都已经支持了这个算法,所以如果我们在打包Vue
项目的时候,可以直接将所有的静态资源压缩为gzip
,就可以极大的减少静态资源的大小,提升浏览器加载速度,那Vue
项目如何配置呢?
添加vue.config.js 文件
在新建Vue
项目中,默认是没有vue.config.js
文件的,首先你需要在项目根目录新建一个vue.config.js文件,然后在文件中加入以下代码
本文后面会多次使用到vue.config.js
文件,在后面将不再赘述。
配置compression-webpack-plugin
安装
compression-webpack-plugin
配置
修改vue.config.js
文件为以下代码
查看压缩效果
在配置上面的压缩之后,执行yarn build
命令,会发现生成的静态文件里面新增了后缀为gz
的文件
如果此时将项目部署到已开启了gzip
的服务器如nginx
里面之后,访问浏览器即可看到浏览器下载的是已压缩的文件
移动端适配
当前移动端比较流行的两种适配方式, 一种是将px
转换为rem
,另一种是将px
转换为vw
,在开发项目时,我一般喜欢将px
转换为vw
,那么如何配置呢
安装 postcss-px-to-viewport
首先,你需要给项目安装postcss-px-to-viewport
插件
配置移动端适配
在项目根目录下面新建文件postcss.config.js
,然后将以下代码加入到文件内
配置完之后,重启服务,在浏览器中审查元素,可以看到原来写的px
都转换成了vw
忽略目录,让moment变得更小
使用过moment
的同学一定知道,moment
的locale
语言包特别大,但是我们一般的项目只在国内用,也用不到那么多语言,是不是可以去掉呢?这时候你需要使用到webpack.IgnorePlugin
。
在vue.config.js
文件,你需要添加以下代码
我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了,这时候如果想用某一种语言应该怎么办呢?
当然小编更建议在项目中使用更轻量级的day.js
代替moment
生产环境删除console.log
开发环境为了调试,会添加大量的console.log
,但如果console.log
提交到生产环境里面,不仅仅会影响到代码执行性能,而且可能会泄露一些核心数据,所以我们更希望的是在生产环境,将所有的console.log
清除掉,怎么做呢?
安装插件
需要安装babel-plugin-transform-remove-console
插件
配置babel.config.js
打开babel.config.js
文件,然后在文件内添加
开启eslint,stylelint
看到这一条,有些同学就有点受不了想退出了,配置这个不是自己给自己找不自在吗?在团队开发中,配置这些还是很有用的,制约团队中的每个人都按照标准来开发功能,这样至少大家写的代码不至于相互看不懂(我深受不规范代码的折磨啊)。
安装依赖
在配置这些lint
之前,你需要安装这些插件
@vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-babel
eslint-plugin-prettier
eslint-plugin-vue
husky
lint-staged
prettier
stylelint
stylelint-config-recess-order
stylelint-config-standard
stylelint-prettier
stylelint-scss
同时还需要给vscode
以下插件
eslint
stylelint
Prettier - Code formatter
配置vscode
在vscode
的setting
文件里面添加以下代码
配置eslint
首先在项目根目录下面添加 .eslintrc.js
与.eslintignore
文件
在.eslintrc.js
文件内添加以下内容
在.eslintignore
文件中添加以下代码
配置完之后,在package.json
的script
里面添加
然后执行yarn eslint
就可以对代码进行格式化,当然vscode
也会在你保存文件的时候校验一次
配置stylelint
限制js
与vue
是不够的,还需要限制以下style
,感觉这是自己给自己无限挖坑的举措,但是这东西越用越爽,一起来看看
首先在项目根目录下面新建.stylelintrc.js
与.stylelintignore
文件
在.stylelintrc.js
文件中添加以下内容
.stylelintignore
文件内容与.eslintignore
文件内容一致
配置完之后,在package.json
的script
里面添加
然后执行yarn stylelint
就可以对样式进行格式化,当然vscode
也会在你保存文件的时候校验一次
配置husky
在eslint
,stylelint
配置完之后,写代码时候vscode
会自动校验格式化代码, 但就怕有人用其他编辑器没有配置插件,将未校验的代码提交到仓库里面,导致所有人的代码都爆红,这时候就需要使用husky
在提交代码时候进行校验。
在git
提交代码时候,会触发一系列hook
钩子函数,而husky
就是一个Git hooks
工具。lint-staged
是一个在git暂存文件上运行linters的工具,为什么要用这个工具呢,因为我们在提交代码的时候,只需要对已经修改过的文件进行校验,不然检查所有文件,比较浪费时间。那我们改怎么配置呢?
你只需要在package.json
文件里面添加以下代码
这时候你如果执行git commit -m '提交描述'
的时候,会发现提交之前会调用eslint
与stylelint
进行代码校验,校验失败无法提交
结语
不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高
版权声明: 本文为 InfoQ 作者【前端有的玩】的原创文章。
原文链接:【http://xie.infoq.cn/article/fbda0b947903e3adc3488ae91】。文章转载请联系作者。
评论 (7 条评论)