{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"独在公司加夜班，行行代码心甚寒。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不知功能何时完，杀了产品来祭天。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"公司前端项目比较多，每个团队都会自己搭建一套属于自己团队的项目框架，导致公司项目五花八门，跨团队协作难上加载，所以小编整理了一个开箱即用的框架，用于统一所有的团队，那这个框架是怎么配置的呢，我们一起来看看。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文内容来源于小编开源的一个基于"},{"type":"codeinline","content":[{"type":"text","text":"vant"}]},{"type":"text","text":"封装的开箱即用框架的一部分，本文中提取了部分功能，完整代码，请查看 "},{"type":"link","attrs":{"href":"https://github.com/snowzijun/vue-vant-base","title":""},"content":[{"type":"text","text":"https://github.com/snowzijun/vue-vant-base"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"启用压缩，让页面加载更快"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在我们开发的时候，为了方便调试，我们需要使用源码进行调试，但在生产环境，我们追求的更多的是加载更快，体验更好，这时候我们会将代码中的空格注释去掉，对待吗进行混淆压缩，只为了让"},{"type":"codeinline","content":[{"type":"text","text":"js"}]},{"type":"text","text":","},{"type":"codeinline","content":[{"type":"text","text":"css"}]},{"type":"text","text":"文件变得更小，加载更快。但只是这样做是不够的，我们还可以做得更极致。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":"是"},{"type":"codeinline","content":[{"type":"text","text":"Web"}]},{"type":"text","text":"世界中使用的最为广泛的文件压缩算法，当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome)都已经支持了这个算法，所以如果我们在打包"},{"type":"codeinline","content":[{"type":"text","text":"Vue"}]},{"type":"text","text":"项目的时候，可以直接将所有的静态资源压缩为"},{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":",就可以极大的减少静态资源的大小，提升浏览器加载速度，那"},{"type":"codeinline","content":[{"type":"text","text":"Vue"}]},{"type":"text","text":"项目如何配置呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"添加vue.config.js 文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在新建"},{"type":"codeinline","content":[{"type":"text","text":"Vue"}]},{"type":"text","text":"项目中，默认是没有"},{"type":"codeinline","content":[{"type":"text","text":"vue.config.js"}]},{"type":"text","text":"文件的，首先你需要在项目根目录新建一个vue.config.js文件，然后在文件中加入以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"module.exports = {\n\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文后面会多次使用到"},{"type":"codeinline","content":[{"type":"text","text":"vue.config.js"}]},{"type":"text","text":"文件，在后面将不再赘述。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置compression-webpack-plugin"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安装 "},{"type":"codeinline","content":[{"type":"text","text":"compression-webpack-plugin"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":" yarn add compression-webpack-plugin -D"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 修改"},{"type":"codeinline","content":[{"type":"text","text":"vue.config.js"}]},{"type":"text","text":"文件为以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const CompressionWebpackPlugin = require('compression-webpack-plugin')\n\n const isProd = process.env.NODE_ENV === 'production'\n\n module.exports = {\n\n configureWebpack: config => {\n\n if (isProd) {\n\n // 配置webpack 压缩\n\n config.plugins.push(\n\n new CompressionWebpackPlugin({\n\n test: /\\.js$|\\.html$|\\.css$/,\n\n // 超过4kb压缩\n\n threshold: 4096\n\n })\n\n )\n\n }\n\n }\n\n }"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"查看压缩效果"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 在配置上面的压缩之后，执行"},{"type":"codeinline","content":[{"type":"text","text":"yarn build"}]},{"type":"text","text":"命令，会发现生成的静态文件里面新增了后缀为"},{"type":"codeinline","content":[{"type":"text","text":"gz"}]},{"type":"text","text":"的文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cc/ccc12361ad41b18cc04fe5fc32bfe3e6.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 如果此时将项目部署到已开启了"},{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":"的服务器如"},{"type":"codeinline","content":[{"type":"text","text":"nginx"}]},{"type":"text","text":"里面之后，访问浏览器即可看到浏览器下载的是已压缩的文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/53/53d6d6666d1fda3561cbb9eca4bca383.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"移动端适配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当前移动端比较流行的两种适配方式， 一种是将"},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":"转换为"},{"type":"codeinline","content":[{"type":"text","text":"rem"}]},{"type":"text","text":",另一种是将"},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":"转换为"},{"type":"codeinline","content":[{"type":"text","text":"vw"}]},{"type":"text","text":",在开发项目时，我一般喜欢将"},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":"转换为"},{"type":"codeinline","content":[{"type":"text","text":"vw"}]},{"type":"text","text":",那么如何配置呢"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"安装 postcss-px-to-viewport"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先，你需要给项目安装"},{"type":"codeinline","content":[{"type":"text","text":"postcss-px-to-viewport"}]},{"type":"text","text":"插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn add postcss-px-to-viewport -D"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置移动端适配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在项目根目录下面新建文件"},{"type":"codeinline","content":[{"type":"text","text":"postcss.config.js"}]},{"type":"text","text":",然后将以下代码加入到文件内"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"module.exports = {\n plugins: {\n autoprefixer: {},\n 'postcss-px-to-viewport': {\n // 视窗的宽度，对应的是我们设计稿的宽度，我们公司用的是375\n viewportWidth: 375,\n // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置\n // viewportHeight: 1334,\n // 指定`px`转换为视窗单位值的小数位数\n unitPrecision: 3,\n // 指定需要转换成的视窗单位，建议使用vw\n viewportUnit: 'vw',\n // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名\n selectorBlackList: ['.ignore'],\n // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值\n minPixelValue: 1,\n // 允许在媒体查询中转换`px`\n mediaQuery: false\n }\n }\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置完之后，重启服务，在浏览器中审查元素，可以看到原来写的"},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":"都转换成了"},{"type":"codeinline","content":[{"type":"text","text":"vw"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/da/da5fd4b311382140816f1ee186761590.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"忽略目录，让moment变得更小"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用过"},{"type":"codeinline","content":[{"type":"text","text":"moment"}]},{"type":"text","text":"的同学一定知道，"},{"type":"codeinline","content":[{"type":"text","text":"moment"}]},{"type":"text","text":"的"},{"type":"codeinline","content":[{"type":"text","text":"locale"}]},{"type":"text","text":"语言包特别大，但是我们一般的项目只在国内用，也用不到那么多语言，是不是可以去掉呢？这时候你需要使用到"},{"type":"codeinline","content":[{"type":"text","text":"webpack.IgnorePlugin"}]},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":"vue.config.js"}]},{"type":"text","text":"文件，你需要添加以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const webpack = require('webpack')\nmodule.exports = {\n chainWebpack: config => {\n // 优化moment 去掉国际化内容\n config\n .plugin('ignore')\n // 忽略/moment/locale下的所有文件\n .use(new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)) \n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了，这时候如果想用某一种语言应该怎么办呢?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"import moment from 'moment'\n//手动引入所需要的语言包\nimport 'moment/locale/zh-cn';\n// 指定使用的语言\nmoment.locale('zh-cn');"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然小编更建议在项目中使用更轻量级的"},{"type":"codeinline","content":[{"type":"text","text":"day.js"}]},{"type":"text","text":"代替"},{"type":"codeinline","content":[{"type":"text","text":"moment"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"生产环境删除console.log"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"开发环境为了调试，会添加大量的"},{"type":"codeinline","content":[{"type":"text","text":"console.log"}]},{"type":"text","text":"，但如果"},{"type":"codeinline","content":[{"type":"text","text":"console.log"}]},{"type":"text","text":"提交到生产环境里面，不仅仅会影响到代码执行性能，而且可能会泄露一些核心数据，所以我们更希望的是在生产环境，将所有的"},{"type":"codeinline","content":[{"type":"text","text":"console.log"}]},{"type":"text","text":"清除掉，怎么做呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"安装插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"需要安装"},{"type":"codeinline","content":[{"type":"text","text":"babel-plugin-transform-remove-console"}]},{"type":"text","text":"插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn add babel-plugin-transform-remove-console -D"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置babel.config.js"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打开"},{"type":"codeinline","content":[{"type":"text","text":"babel.config.js"}]},{"type":"text","text":"文件，然后在文件内添加"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// 所有生产环境\nconst prodPlugin = []\n\nif (process.env.NODE_ENV === 'production') {\n \n// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn\n prodPlugin.push([\n 'transform-remove-console',\n {\n // 保留 console.error 与 console.warn\n exclude: ['error', 'warn']\n }\n ])\n}\n\nmodule.exports = {\n plugins: [\n ...prodPlugin\n ]\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"开启eslint,stylelint"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看到这一条，有些同学就有点受不了想退出了，配置这个不是自己给自己找不自在吗？在团队开发中，配置这些还是很有用的，制约团队中的每个人都按照标准来开发功能，这样至少大家写的代码不至于相互看不懂（我深受不规范代码的折磨啊）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"安装依赖"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在配置这些"},{"type":"codeinline","content":[{"type":"text","text":"lint"}]},{"type":"text","text":"之前，你需要安装这些插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"@vue/cli-plugin-eslint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"@vue/eslint-config-prettier"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"babel-eslint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"eslint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"eslint-plugin-babel"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"eslint-plugin-prettier"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"eslint-plugin-vue"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"husky"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"lint-staged"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"prettier"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint-config-recess-order"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint-config-standard"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint-prettier"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint-scss"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同时还需要给"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"以下插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"eslint"}]}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Prettier - Code formatter"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置vscode"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"的"},{"type":"codeinline","content":[{"type":"text","text":"setting"}]},{"type":"text","text":"文件里面添加以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\"eslint.enable\":true,\n\"eslint.options\": {\n \"extensions\":[\n \".js\",\n \".vue\",\n \".ts\",\n \".tsx\"\n ]\n },\n \"eslint.validate\": [\n \"javascript\",\n \"javascriptreact\",\n \"typescript\",\n \"typescriptreact\"\n ],\n \"css.validate\": true,\n \"scss.validate\": true,\n \"less.validate\": true,\n \"editor.codeActionsOnSave\": {\n \"source.fixAll\": true\n },"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置eslint"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在项目根目录下面添加 "},{"type":"codeinline","content":[{"type":"text","text":".eslintrc.js"}]},{"type":"text","text":"与"},{"type":"codeinline","content":[{"type":"text","text":".eslintignore"}]},{"type":"text","text":"文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":".eslintrc.js"}]},{"type":"text","text":"文件内添加以下内容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// 缩略版\nmodule.exports = {\n root: true,\n globals: {\n process: true\n },\n parserOptions: {\n parser: 'babel-eslint',\n sourceType: 'module'\n },\n env: {\n browser: true,\n node: true,\n es6: true\n },\n extends: ['plugin:vue/recommended', 'eslint:recommended'],\n plugins: ['babel', 'prettier'],\n rules:{ \n // 校验规则此处略\n\t}\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":".eslintignore"}]},{"type":"text","text":"文件中添加以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":""},"content":[{"type":"text","text":".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置完之后，在"},{"type":"codeinline","content":[{"type":"text","text":"package.json"}]},{"type":"text","text":"的"},{"type":"codeinline","content":[{"type":"text","text":"script"}]},{"type":"text","text":"里面添加"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"powershell"},"content":[{"type":"text","text":"\"eslint\": \"vue-cli-service lint\""}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后执行"},{"type":"codeinline","content":[{"type":"text","text":"yarn eslint"}]},{"type":"text","text":"就可以对代码进行格式化，当然"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"也会在你保存文件的时候校验一次"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置stylelint"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"限制"},{"type":"codeinline","content":[{"type":"text","text":"js"}]},{"type":"text","text":"与"},{"type":"codeinline","content":[{"type":"text","text":"vue"}]},{"type":"text","text":"是不够的，还需要限制以下"},{"type":"codeinline","content":[{"type":"text","text":"style"}]},{"type":"text","text":",感觉这是自己给自己无限挖坑的举措，但是这东西越用越爽，一起来看看"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在项目根目录下面新建"},{"type":"codeinline","content":[{"type":"text","text":".stylelintrc.js"}]},{"type":"text","text":"与"},{"type":"codeinline","content":[{"type":"text","text":".stylelintignore"}]},{"type":"text","text":"文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":".stylelintrc.js"}]},{"type":"text","text":"文件中添加以下内容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"module.exports = {\n extends: [\"stylelint-config-standard\",\"stylelint-config-recess-order\"],\n \"plugins\": [\n \"stylelint-scss\"\n ],\n rules: {\n // 校验规则略\n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":".stylelintignore"}]},{"type":"text","text":"文件内容与"},{"type":"codeinline","content":[{"type":"text","text":".eslintignore"}]},{"type":"text","text":"文件内容一致"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置完之后，在"},{"type":"codeinline","content":[{"type":"text","text":"package.json"}]},{"type":"text","text":"的"},{"type":"codeinline","content":[{"type":"text","text":"script"}]},{"type":"text","text":"里面添加"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"powershell"},"content":[{"type":"text","text":"\"stylelint\": \"stylelint src/**/*.{html,vue,css,sass,scss} --fix\","}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后执行"},{"type":"codeinline","content":[{"type":"text","text":"yarn stylelint"}]},{"type":"text","text":"就可以对样式进行格式化，当然"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"也会在你保存文件的时候校验一次"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"配置husky"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":"eslint"}]},{"type":"text","text":","},{"type":"codeinline","content":[{"type":"text","text":"stylelint"}]},{"type":"text","text":"配置完之后，写代码时候"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"会自动校验格式化代码， 但就怕有人用其他编辑器没有配置插件，将未校验的代码提交到仓库里面，导致所有人的代码都爆红，这时候就需要使用"},{"type":"codeinline","content":[{"type":"text","text":"husky"}]},{"type":"text","text":"在提交代码时候进行校验。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":"git"}]},{"type":"text","text":"提交代码时候，会触发一系列"},{"type":"codeinline","content":[{"type":"text","text":"hook"}]},{"type":"text","text":"钩子函数，而"},{"type":"codeinline","content":[{"type":"text","text":"husky"}]},{"type":"text","text":"就是一个"},{"type":"codeinline","content":[{"type":"text","text":"Git hooks "}]},{"type":"text","text":"工具。"},{"type":"codeinline","content":[{"type":"text","text":"lint-staged "}]},{"type":"text","text":"是一个在git暂存文件上运行linters的工具,为什么要用这个工具呢，因为我们在提交代码的时候，只需要对已经修改过的文件进行校验，不然检查所有文件，比较浪费时间。那我们改怎么配置呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你只需要在"},{"type":"codeinline","content":[{"type":"text","text":"package.json"}]},{"type":"text","text":"文件里面添加以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":" \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\",\n \"commit-msg\": \"commitlint -E HUSKY_GIT_PARAMS\"\n }\n },\n \"lint-staged\": {\n \"*.{js,vue}\": [\n \"vue-cli-service lint\",\n \"git add -A\"\n ],\n \"*.{html,vue,css,sass,scss}\": [\n \"yarn stylelint\"\n ]\n }"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这时候你如果执行"},{"type":"codeinline","content":[{"type":"text","text":"git commit -m '提交描述'"}]},{"type":"text","text":"的时候，会发现提交之前会调用"},{"type":"codeinline","content":[{"type":"text","text":"eslint"}]},{"type":"text","text":"与"},{"type":"codeinline","content":[{"type":"text","text":"stylelint"}]},{"type":"text","text":"进行代码校验，校验失败无法提交"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"结语"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}
我在项目中是这样配置Vue的
{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"独在公司加夜班，行行代码心甚寒。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不知功能何时完，杀了产品来祭天。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"公司前端项目比较多，每个团队都会自己搭建一套属于自己团队的项目框架，导致公司项目五花八门，跨团队协作难上加载，所以小编整理了一个开箱即用的框架，用于统一所有的团队，那这个框架是怎么配置的呢，我们一起来看看。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文内容来源于小编开源的一个基于"},{"type":"codeinline","content":[{"type":"text","text":"vant"}]},{"type":"text","text":"封装的开箱即用框架的一部分，本文中提取了部分功能，完整代码，请查看 "},{"type":"link","attrs":{"href":"https://github.com/snowzijun/vue-vant-base","title":""},"content":[{"type":"text","text":"https://github.com/snowzijun/vue-vant-base"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"启用压缩，让页面加载更快"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在我们开发的时候，为了方便调试，我们需要使用源码进行调试，但在生产环境，我们追求的更多的是加载更快，体验更好，这时候我们会将代码中的空格注释去掉，对待吗进行混淆压缩，只为了让"},{"type":"codeinline","content":[{"type":"text","text":"js"}]},{"type":"text","text":","},{"type":"codeinline","content":[{"type":"text","text":"css"}]},{"type":"text","text":"文件变得更小，加载更快。但只是这样做是不够的，我们还可以做得更极致。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":"是"},{"type":"codeinline","content":[{"type":"text","text":"Web"}]},{"type":"text","text":"世界中使用的最为广泛的文件压缩算法，当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome)都已经支持了这个算法，所以如果我们在打包"},{"type":"codeinline","content":[{"type":"text","text":"Vue"}]},{"type":"text","text":"项目的时候，可以直接将所有的静态资源压缩为"},{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":",就可以极大的减少静态资源的大小，提升浏览器加载速度，那"},{"type":"codeinline","content":[{"type":"text","text":"Vue"}]},{"type":"text","text":"项目如何配置呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"添加vue.config.js 文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在新建"},{"type":"codeinline","content":[{"type":"text","text":"Vue"}]},{"type":"text","text":"项目中，默认是没有"},{"type":"codeinline","content":[{"type":"text","text":"vue.config.js"}]},{"type":"text","text":"文件的，首先你需要在项目根目录新建一个vue.config.js文件，然后在文件中加入以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"module.exports = {\n\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文后面会多次使用到"},{"type":"codeinline","content":[{"type":"text","text":"vue.config.js"}]},{"type":"text","text":"文件，在后面将不再赘述。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置compression-webpack-plugin"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安装 "},{"type":"codeinline","content":[{"type":"text","text":"compression-webpack-plugin"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":" yarn add compression-webpack-plugin -D"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 修改"},{"type":"codeinline","content":[{"type":"text","text":"vue.config.js"}]},{"type":"text","text":"文件为以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const CompressionWebpackPlugin = require('compression-webpack-plugin')\n\n const isProd = process.env.NODE_ENV === 'production'\n\n module.exports = {\n\n configureWebpack: config => {\n\n if (isProd) {\n\n // 配置webpack 压缩\n\n config.plugins.push(\n\n new CompressionWebpackPlugin({\n\n test: /\\.js$|\\.html$|\\.css$/,\n\n // 超过4kb压缩\n\n threshold: 4096\n\n })\n\n )\n\n }\n\n }\n\n }"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"查看压缩效果"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 在配置上面的压缩之后，执行"},{"type":"codeinline","content":[{"type":"text","text":"yarn build"}]},{"type":"text","text":"命令，会发现生成的静态文件里面新增了后缀为"},{"type":"codeinline","content":[{"type":"text","text":"gz"}]},{"type":"text","text":"的文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cc/ccc12361ad41b18cc04fe5fc32bfe3e6.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 如果此时将项目部署到已开启了"},{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":"的服务器如"},{"type":"codeinline","content":[{"type":"text","text":"nginx"}]},{"type":"text","text":"里面之后，访问浏览器即可看到浏览器下载的是已压缩的文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/53/53d6d6666d1fda3561cbb9eca4bca383.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"移动端适配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当前移动端比较流行的两种适配方式， 一种是将"},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":"转换为"},{"type":"codeinline","content":[{"type":"text","text":"rem"}]},{"type":"text","text":",另一种是将"},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":"转换为"},{"type":"codeinline","content":[{"type":"text","text":"vw"}]},{"type":"text","text":",在开发项目时，我一般喜欢将"},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":"转换为"},{"type":"codeinline","content":[{"type":"text","text":"vw"}]},{"type":"text","text":",那么如何配置呢"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"安装 postcss-px-to-viewport"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先，你需要给项目安装"},{"type":"codeinline","content":[{"type":"text","text":"postcss-px-to-viewport"}]},{"type":"text","text":"插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn add postcss-px-to-viewport -D"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置移动端适配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在项目根目录下面新建文件"},{"type":"codeinline","content":[{"type":"text","text":"postcss.config.js"}]},{"type":"text","text":",然后将以下代码加入到文件内"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"module.exports = {\n plugins: {\n autoprefixer: {},\n 'postcss-px-to-viewport': {\n // 视窗的宽度，对应的是我们设计稿的宽度，我们公司用的是375\n viewportWidth: 375,\n // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置\n // viewportHeight: 1334,\n // 指定`px`转换为视窗单位值的小数位数\n unitPrecision: 3,\n // 指定需要转换成的视窗单位，建议使用vw\n viewportUnit: 'vw',\n // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名\n selectorBlackList: ['.ignore'],\n // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值\n minPixelValue: 1,\n // 允许在媒体查询中转换`px`\n mediaQuery: false\n }\n }\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置完之后，重启服务，在浏览器中审查元素，可以看到原来写的"},{"type":"codeinline","content":[{"type":"text","text":"px"}]},{"type":"text","text":"都转换成了"},{"type":"codeinline","content":[{"type":"text","text":"vw"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/da/da5fd4b311382140816f1ee186761590.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"忽略目录，让moment变得更小"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用过"},{"type":"codeinline","content":[{"type":"text","text":"moment"}]},{"type":"text","text":"的同学一定知道，"},{"type":"codeinline","content":[{"type":"text","text":"moment"}]},{"type":"text","text":"的"},{"type":"codeinline","content":[{"type":"text","text":"locale"}]},{"type":"text","text":"语言包特别大，但是我们一般的项目只在国内用，也用不到那么多语言，是不是可以去掉呢？这时候你需要使用到"},{"type":"codeinline","content":[{"type":"text","text":"webpack.IgnorePlugin"}]},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":"vue.config.js"}]},{"type":"text","text":"文件，你需要添加以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const webpack = require('webpack')\nmodule.exports = {\n chainWebpack: config => {\n // 优化moment 去掉国际化内容\n config\n .plugin('ignore')\n // 忽略/moment/locale下的所有文件\n .use(new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)) \n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了，这时候如果想用某一种语言应该怎么办呢?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"import moment from 'moment'\n//手动引入所需要的语言包\nimport 'moment/locale/zh-cn';\n// 指定使用的语言\nmoment.locale('zh-cn');"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然小编更建议在项目中使用更轻量级的"},{"type":"codeinline","content":[{"type":"text","text":"day.js"}]},{"type":"text","text":"代替"},{"type":"codeinline","content":[{"type":"text","text":"moment"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"生产环境删除console.log"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"开发环境为了调试，会添加大量的"},{"type":"codeinline","content":[{"type":"text","text":"console.log"}]},{"type":"text","text":"，但如果"},{"type":"codeinline","content":[{"type":"text","text":"console.log"}]},{"type":"text","text":"提交到生产环境里面，不仅仅会影响到代码执行性能，而且可能会泄露一些核心数据，所以我们更希望的是在生产环境，将所有的"},{"type":"codeinline","content":[{"type":"text","text":"console.log"}]},{"type":"text","text":"清除掉，怎么做呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"安装插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"需要安装"},{"type":"codeinline","content":[{"type":"text","text":"babel-plugin-transform-remove-console"}]},{"type":"text","text":"插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn add babel-plugin-transform-remove-console -D"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置babel.config.js"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打开"},{"type":"codeinline","content":[{"type":"text","text":"babel.config.js"}]},{"type":"text","text":"文件，然后在文件内添加"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// 所有生产环境\nconst prodPlugin = []\n\nif (process.env.NODE_ENV === 'production') {\n \n// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn\n prodPlugin.push([\n 'transform-remove-console',\n {\n // 保留 console.error 与 console.warn\n exclude: ['error', 'warn']\n }\n ])\n}\n\nmodule.exports = {\n plugins: [\n ...prodPlugin\n ]\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"开启eslint,stylelint"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看到这一条，有些同学就有点受不了想退出了，配置这个不是自己给自己找不自在吗？在团队开发中，配置这些还是很有用的，制约团队中的每个人都按照标准来开发功能，这样至少大家写的代码不至于相互看不懂（我深受不规范代码的折磨啊）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"安装依赖"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在配置这些"},{"type":"codeinline","content":[{"type":"text","text":"lint"}]},{"type":"text","text":"之前，你需要安装这些插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"@vue/cli-plugin-eslint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"@vue/eslint-config-prettier"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"babel-eslint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"eslint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"eslint-plugin-babel"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"eslint-plugin-prettier"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"eslint-plugin-vue"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"husky"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"lint-staged"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"prettier"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint-config-recess-order"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint-config-standard"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint-prettier"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint-scss"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同时还需要给"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"以下插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"eslint"}]}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"stylelint"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Prettier - Code formatter"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置vscode"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"的"},{"type":"codeinline","content":[{"type":"text","text":"setting"}]},{"type":"text","text":"文件里面添加以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\"eslint.enable\":true,\n\"eslint.options\": {\n \"extensions\":[\n \".js\",\n \".vue\",\n \".ts\",\n \".tsx\"\n ]\n },\n \"eslint.validate\": [\n \"javascript\",\n \"javascriptreact\",\n \"typescript\",\n \"typescriptreact\"\n ],\n \"css.validate\": true,\n \"scss.validate\": true,\n \"less.validate\": true,\n \"editor.codeActionsOnSave\": {\n \"source.fixAll\": true\n },"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置eslint"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在项目根目录下面添加 "},{"type":"codeinline","content":[{"type":"text","text":".eslintrc.js"}]},{"type":"text","text":"与"},{"type":"codeinline","content":[{"type":"text","text":".eslintignore"}]},{"type":"text","text":"文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":".eslintrc.js"}]},{"type":"text","text":"文件内添加以下内容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// 缩略版\nmodule.exports = {\n root: true,\n globals: {\n process: true\n },\n parserOptions: {\n parser: 'babel-eslint',\n sourceType: 'module'\n },\n env: {\n browser: true,\n node: true,\n es6: true\n },\n extends: ['plugin:vue/recommended', 'eslint:recommended'],\n plugins: ['babel', 'prettier'],\n rules:{ \n // 校验规则此处略\n\t}\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":".eslintignore"}]},{"type":"text","text":"文件中添加以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":""},"content":[{"type":"text","text":".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置完之后，在"},{"type":"codeinline","content":[{"type":"text","text":"package.json"}]},{"type":"text","text":"的"},{"type":"codeinline","content":[{"type":"text","text":"script"}]},{"type":"text","text":"里面添加"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"powershell"},"content":[{"type":"text","text":"\"eslint\": \"vue-cli-service lint\""}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后执行"},{"type":"codeinline","content":[{"type":"text","text":"yarn eslint"}]},{"type":"text","text":"就可以对代码进行格式化，当然"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"也会在你保存文件的时候校验一次"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置stylelint"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"限制"},{"type":"codeinline","content":[{"type":"text","text":"js"}]},{"type":"text","text":"与"},{"type":"codeinline","content":[{"type":"text","text":"vue"}]},{"type":"text","text":"是不够的，还需要限制以下"},{"type":"codeinline","content":[{"type":"text","text":"style"}]},{"type":"text","text":",感觉这是自己给自己无限挖坑的举措，但是这东西越用越爽，一起来看看"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在项目根目录下面新建"},{"type":"codeinline","content":[{"type":"text","text":".stylelintrc.js"}]},{"type":"text","text":"与"},{"type":"codeinline","content":[{"type":"text","text":".stylelintignore"}]},{"type":"text","text":"文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":".stylelintrc.js"}]},{"type":"text","text":"文件中添加以下内容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"module.exports = {\n extends: [\"stylelint-config-standard\",\"stylelint-config-recess-order\"],\n \"plugins\": [\n \"stylelint-scss\"\n ],\n rules: {\n // 校验规则略\n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":".stylelintignore"}]},{"type":"text","text":"文件内容与"},{"type":"codeinline","content":[{"type":"text","text":".eslintignore"}]},{"type":"text","text":"文件内容一致"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置完之后，在"},{"type":"codeinline","content":[{"type":"text","text":"package.json"}]},{"type":"text","text":"的"},{"type":"codeinline","content":[{"type":"text","text":"script"}]},{"type":"text","text":"里面添加"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"powershell"},"content":[{"type":"text","text":"\"stylelint\": \"stylelint src/**/*.{html,vue,css,sass,scss} --fix\","}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后执行"},{"type":"codeinline","content":[{"type":"text","text":"yarn stylelint"}]},{"type":"text","text":"就可以对样式进行格式化，当然"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"也会在你保存文件的时候校验一次"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"配置husky"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":"eslint"}]},{"type":"text","text":","},{"type":"codeinline","content":[{"type":"text","text":"stylelint"}]},{"type":"text","text":"配置完之后，写代码时候"},{"type":"codeinline","content":[{"type":"text","text":"vscode"}]},{"type":"text","text":"会自动校验格式化代码， 但就怕有人用其他编辑器没有配置插件，将未校验的代码提交到仓库里面，导致所有人的代码都爆红，这时候就需要使用"},{"type":"codeinline","content":[{"type":"text","text":"husky"}]},{"type":"text","text":"在提交代码时候进行校验。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在"},{"type":"codeinline","content":[{"type":"text","text":"git"}]},{"type":"text","text":"提交代码时候，会触发一系列"},{"type":"codeinline","content":[{"type":"text","text":"hook"}]},{"type":"text","text":"钩子函数，而"},{"type":"codeinline","content":[{"type":"text","text":"husky"}]},{"type":"text","text":"就是一个"},{"type":"codeinline","content":[{"type":"text","text":"Git hooks "}]},{"type":"text","text":"工具。"},{"type":"codeinline","content":[{"type":"text","text":"lint-staged "}]},{"type":"text","text":"是一个在git暂存文件上运行linters的工具,为什么要用这个工具呢，因为我们在提交代码的时候，只需要对已经修改过的文件进行校验，不然检查所有文件，比较浪费时间。那我们改怎么配置呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你只需要在"},{"type":"codeinline","content":[{"type":"text","text":"package.json"}]},{"type":"text","text":"文件里面添加以下代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":" \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\",\n \"commit-msg\": \"commitlint -E HUSKY_GIT_PARAMS\"\n }\n },\n \"lint-staged\": {\n \"*.{js,vue}\": [\n \"vue-cli-service lint\",\n \"git add -A\"\n ],\n \"*.{html,vue,css,sass,scss}\": [\n \"yarn stylelint\"\n ]\n }"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这时候你如果执行"},{"type":"codeinline","content":[{"type":"text","text":"git commit -m '提交描述'"}]},{"type":"text","text":"的时候，会发现提交之前会调用"},{"type":"codeinline","content":[{"type":"text","text":"eslint"}]},{"type":"text","text":"与"},{"type":"codeinline","content":[{"type":"text","text":"stylelint"}]},{"type":"text","text":"进行代码校验，校验失败无法提交"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"结语"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.