众所周知，虽然VueCLI提供了脚手架的功能，但是由于官方提供的脚手架过于简单，生成的项目在实际中project在开发的时候，还是需要做很多事情的，而vue-automation就是为了解决这个痛点，让你的开发效率至少提升50%这个vue-automation是个什么东西？the-boxVue项目模板，它基于VueCLI4的特性，默认集成了vue-router、vuex、axios。自动引入全局SCSS资源。全局组件会自动注册。支持SVG图标和CSS精灵。/加载速度结合IDE插件、ESlint、stylelint、Githooks，轻松实现团队代码规范。功能介绍配置默认为开发环境和生产环境提供两套配置，分别在根目录下的.env.development和.env.production文件中。可配置项包括网站标题、接口请求地址、是否开启CDN支持。开发者可以根据实际业务需求进行扩展。如果你不熟悉这个领域，你可以阅读VueCLI环境变量和模式章节。全局SCSS资源全局SCSS资源不是全局样式，而是变量、@mixin、@function等。将全局SCSS资源存放在assets/styles/resources/目录下，也就是说该目录下的文件不需要页面上的引用现在有效且可用。项目中默认存放的是utils.scss文件，里面有几个@mixin和%，可以在页面中尝试使用看看效果。同样，在sprite目录下生成的SCSS资源也是全局可调用的。精灵图也叫雪碧图，原理是将多张小图合并为一张大图，从而减少HTTP请求，提高网站访问速度。精灵原图存放位置在assets/sprites/目录下，以文件夹区分。项目运行前，会根据文件夹生成对应的精灵文件（精灵图片和.scss文件），多个文件夹会生成多个精灵文件。需要注意的是，在项目运行时，修改文件夹中的图片会重新生成相关的sprite文件，但如果新建文件夹，则需要重新运行项目才能生成相应的sprite文件。在.vue文件中，可以直接通过@include使用sprite贴图，无需手动导入.scss文件：//方法一//@include[文件夹名]-sprite([文件名]);.icon{@includeexample-sprite(address);}//方法2//@includeall-[文件夹名称]-sprites;@include所有示例精灵；最终输出如下：/*method1*/.icon{background-image:url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);背景位置：0px0px；背景尺寸：210px210px；宽度：100px；图片：网址（img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png）；背景位置：00；背景尺寸：210px210px；宽度：100px；高度：100px;}.example-feedback-groundage-sprites(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);背景位置：-110px0；背景尺寸：210px210px；宽度：100px；高度：100px;}.example-payment:backim-sprites{/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);背景位置：0-110像素；背景尺寸：210px210px；宽度：100px；height:100px;}如果是小项目，静态图标不多，可以全部放在一个文件夹里；如果是中型或大型项目，可以将文件夹分成模块，这样不同的模块最终会生成自己的sprite文件。SVG图标现在越来越多的项目开始使用SVG图标来代替sprite。这个框架还提供了对SVG图标的支持，使用起来很方便。推荐去阿里巴巴矢量图标库下载高质量的SVG图标。首先把svg文件放到src/assets/icons/目录下，然后就可以在页面上使用了。name是svg文件的名字组件是全局组件，所以不需要注册就可以使用全局组件。全局组件存储在components/global/目录中。请注意，每个组件都是通过文件夹区分的。每个组件的文件夹中至少保留一个名为index的组件入口，例如index.vue。该组件必须设置一个名称并确保其唯一性。自动注册会将组件名称设置为组件名称。可以参考SvgIcon组件的写法。虽然文件夹名称和名字没有关系，但还是建议和名字保持一致。如果通过js调用组件，请确保组件入口文件为index.js，参考ExampleNotice组件。vue-router路由也实现了自动注册，但是因为有优先级的概念，先定义的会优先匹配，所以同一个模块下的路由需要放在一个路由配置文件中。开发者只需要关心router/modules/目录下的文件即可。一个模块对应一个.js文件。参考router/modules/example.js文件。VuexVuex也实现了自动注册，开发只需要关注store/modules/文件夹下的文件，也是按照modules来区分文件的。新构建版本：//example.jsconststate={}constgetters={}constactions={}constmutations={}exportdefault{namespaced:true,state,actions,getters,mutations}文件命名空间由默认情况下，文件名将默认注册为模块名。用法：this.$store.state.example.xxx;this.$store.getters['example/xxx'];this.$store.dispatch('example/xxx');this.$store.commit('例子/xxx');axios拦截器拦截器的作用是拦截每一个请求和响应，然后做一些全局的处理。比如界面响应错误，可以在拦截器中显示，并统一错误提示，方便业务开发。本框架提供了一个拦截器参考代码src/api/index.js，因为每个公司提供的接口标准不一样，所以这个文件需要开发者根据各自公司的接口自定义相应的拦截器。代码很简单，先初始化axios对象，然后axios.interceptors.request.use()和axios.interceptors.response.use()分别是请求和响应的拦截代码。参考代码中只做了简单的拦截处理。比如请求时会自动带上token，响应时会根据错误信息判断是登录失败还是接口报错。快速创建文件该功能是基于plop实现的。在开发过程中，免不了要经常手动创建页面、组件等文件，还要在文件中写入一些必要的代码。你觉得麻烦吗？现在您可以以更简洁的方式处理所有这些。模板默认提供三个模板文件，page（页面/布局）、component（组件）、store（全局状态），可以通过yarnnew命令选择。在实际项目开发中，建议根据项目自定义适合项目的模板文件，这样可以大大提高开发效率，也可以在多人协作开发时统一一些标准。模板目录为./plop-templates/，如果是新模型，记得在项目根目录下引用plopfile.js。代码规范：为保证代码风格统一，IDE编辑器统一使用VSCode作为开发IDE，并安装如下扩展：EditorConfigforVSCodeESLintVeturPrettier-Codeformatterstylerint安装完成后，在settings.json中添加如下配置：editor.codeActionsOnSave":{"source.fixAll.eslint":true,"source.fixAll.stylelint":true}最后的效果是保存的时候，会自动对当前文件进行代码格式化操作。代码规范：Git钩子的上述操作只是格式化代码的书写规范，如缩进、空格、末尾分号等。在提交代码时，Git的钩子会检查代码是否存在IDE无法自动修复的错误，例如未使用的变量。如果有错误，提交将被取消，直到开发者修复所有错误以确保仓库中的代码绝对正确后，才会允许提交。您可以通过修改.eslintignore和.stylelintignore来忽略不需要代码规范的文件。比如项目中引用了一些第三方插件或者组件，我们可以忽略。如果依赖包安装后才执行gitinit仓库的初始化，那么Githook是无法初始化的。建议在gitinit后再次执行yarn或npmi重新安装依赖包。代码规范：配置代码规范主要有三个配置文件，分别是IDE配置（.editorconfig）、ESLint配置（.eslintrc.js和.eslintignore）、StyleLint配置（.stylelintrc和.stylelintignore）。以代码缩进为例，本模板默认缩进4个空格，如果要调整为2个空格，需要在.editorconfig中修改：indent_size=2在.eslintrc.js中修改：'indent':[2,2,{'SwitchCase':1}],...'vue/html-indent':[2,2],...'vue/script-indent':[2,2,{'switchCase':1}]在.stylelintrc中修改:"indentation":2修改后分别执行以下两条命令：yarnrunlintyarnrunstylelint该操作会对代码进行格式检查，如果规则支持自动修复，则会将不符合规则的代码自动格式化。以上面的例子，当调整缩进规则时，我们不需要手动调整每个文件，可以通过命令自动应用新的缩进规则。扩展功能除了以上常见的功能介绍，vue-automation还支持mock、CDN、GZip、移动端等相关配置，轻松适应任何开发场景，真正做到开箱即用。生态在我现在的公司，vue-automation已经稳定应用于数十个真实项目，涵盖企业官网、商城、数字大屏、微信♂等诸多不同领域。同时在其基础上开发了一套独立的中后??台系统框架：Fantastic-admin，在易用性的基础上保证了功能的全面性，超越了市面上大多数同类框架。新年展望2021年vue-automation升级全面支持Vue3最后祝大家新年快乐，让我们一起告别2020！
