是什么？vue-automation是一个开箱即用的Vue项目模板，它基于VueCLI4.VueCLI提供了脚手架的功能，但是由于官方提供的脚手架过于简单，我们还需要做很多事情在实际项目开发中使用的时候，vue-automation就是为了解决这个痛点，让你的开发效率至少可以提升50以上。components自动注册支持SVG图标，CSSsprites自动合成支持mock数据，不受后端约束独立开发支持GZip和CDN优化项目大小/加载速度组合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直接使用精灵贴图，无需手动引入.scss文件：//方法一//@include[文件夹名]-sprite([文件名]);.icon{@includeexample-sprite(地址);}//方法2//@includeall-[文件夹名称]-sprites;@includeall-example-sprites;最终输出如下：/*方法1*/.icon{background-image:url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);background-position:0px0px;background-size:210px210px;width:100px;height:100px;}/*方法2*/.example-address-sprites{background-image:/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);background-position:00;background-size:210px210px;width:100px;height:100px;}.example-feedback-sprites{background-image:url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);background-position:-110px0;background-size:210px210px;width:100px;height:100px;}.example-payment-sprites{background-image:url(img/example.326b35aec20837b9c08563c654262bpng)326;background-position:0-110px;background-size:210px210px;width:100px;height:100px;}如果是小项目，有静态图标不多，可以全部放在一个文件夹里；文件夹可以按模块划分，这样不同的模块最终会生成自己的精灵文件。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}默认启用文件命名空间，文件name将默认注册为模块name。用法：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()分别是request和response的拦截代码。参考代码中只做了简单的拦截处理。比如请求时会自动带上token，响应时会根据错误信息判断是登录失败还是接口报错。快速创建文件该功能是基于plop实现的。在开发过程中，免不了要经常手动创建页面、组件等文件，还要在文件中写入一些必要的代码。你觉得麻烦吗？现在您可以以更简洁的方式处理所有这些。模板默认提供了page（页面/布局）、component（组件）、store（全局状态）三个模板文件，可以通过yarnnew命令选择。在实际项目开发中，建议根据项目自定义适合项目的模板文件，这样可以大大提高开发效率，也可以在多人协作开发时统一一些标准。模板目录为./plop-templates/，如果是新模型记得在项目根目录下引用plopfile.js。代码规范：为保证代码风格统一，IDE编辑器统一使用VSCode作为开发IDE，并安装如下扩展：EditorConfigforVSCodeESLintVeturPrettier-Codeformatterstylelint安装完成后，在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！
