vue-automation 是一款开箱即用的 Vue 项目模版，它基于 Vue CLI 4
众所周知，虽然 Vue CLI 提供了脚手架的功能，但由于官方的脚手架过于简单，运用在实际项目开发上的时候，我们还需要做很多事情，而 vue-automation 就是来解决这一痛点，让你的开发效率至少提升 50% 以上
特点默认集成 vue-router 、vuex 和 axios
全局 SCSS 资源自动引入
全局组件自动注册
支持 SVG 图标，CSS 精灵图自动合成
支持 mock 数据，可摆脱后端束缚独立开发
支持 GZip 和 CDN 优化项目体积/加载速度
结合 IDE 插件、ESlint 、stylelint 、Git 钩子，轻松实现团队代码规范
功能介绍 配置默认提供开发环境和生产环境两套配置，分别在根目录下 .env.development 和 .env.production 文件里，可配置项有网站标题、接口请求地址和是否开启CDN支持。
开发者可根据实际业务需求进行扩展，如果对这块不熟悉，可阅读 Vue CLI 环境变量和模式 章节。
全局 SCSS 资源全局 SCSS 资源并不是全局样式，是变量、@mixin 、@function 这些东西
在 assets/styles/resources/ 目录下存放全局的 SCSS 资源，也就是说在这个目录里的文件，无需在页面上引用即可生效并使用。
项目中默认存放了 utils.scss 文件，里面有几个 @mixin 和 % ，你可以尝试在页面中使用它们看看效果。
同样，精灵图目录下生成的 SCSS 资源也是全局可调用的。
精灵图又称雪碧图，原理是将多张小图合并到一张大图上，以便减少 HTTP 请求，提高网站访问速度。
精灵图原始图片的存放位置位于 assets/sprites/ 目录下，注意按文件夹区分。
项目运行前会根据文件夹生成对应的精灵图文件（精灵图图片和 .scss 文件），多个文件夹则会生成多个精灵图文件。需要注意的是，在项目运行时，修改文件夹里的图片，会重新生成相关精灵图文件，但如果新建文件夹，则需要重新运行项目才会生成对应精灵图文件。
在 .vue 文件中可通过 @include 直接使用精灵图，无需手动引入 .scss 文件：
// 方法 1 // @include [文件夹名称]-sprite([文件名称]); .icon { @include example-sprite(address); } // 方法 2 // @include all-[文件夹名称]-sprites; @include all-example-sprites;最终输出如下：
/* 方法 1 */ .icon { background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: 0px 0px; background-size: 210px 210px; width: 100px; height: 100px; } /* 方法 2 */ .example-address-sprites { background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: 0 0; background-size: 210px 210px; width: 100px; height: 100px; } .example-feedback-sprites { background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: -110px 0; background-size: 210px 210px; width: 100px; height: 100px; } .example-payment-sprites { background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: 0 -110px; background-size: 210px 210px; width: 100px; height: 100px; }如果是小型项目，静态图标不多，可全部放在一个文件夹内；如果是中大型项目，文件夹可按模块来划分，这样不同的模块最终会生成各自的精灵图文件。
SVG 图标现在越来越多项目开始使用 SVG 图标做为精灵图的替代品，本框架也提供了 SVG 图标支持，方便使用。推荐去阿里巴巴矢量图标库下载高质量 SVG 图标
首先将 svg 文件放到 src/assets/icons/ 目录下，然后在页面中就可以使用了，name 就是 svg 文件名
<svg-icon /><svg-icon /> 组件为全局组件，所以无需注册即可使用
全局组件全局组件存放在 components/global/ 目录下，需要注意各个组件按文件夹区分。
每个组件的文件夹内至少保留一个文件名为 index 的组件入口，例如 index.vue 。
组件必须设置 name 并保证其唯一，自动注册会将组件的 name 设为组件名，可参考 SvgIcon 组件写法。
虽然文件夹名称和 name 无关联，但建议与 name 保持一致。
如果组件是通过 js 进行调用，则确保组件入口文件为 index.js，可参考 ExampleNotice 组件。
Vue-router路由也实现了自动注册，但因为有优先级的概念，先定义的会先匹配，所以同一模块下的路由需要放在一个路由配置文件里。
开发者只需关心 router/modules/ 目录下的文件，一个模块对应一个 .js 文件，可参考 router/modules/example.js 文件。
VuexVuex 同样实现了自动注册，开发只需关注 store/modules/ 文件夹里的文件即可，同样也按照模块区分文件。
新建模版：
// example.js const state = {} const getters = {} const actions = {} const mutations = {} export default { namespaced: true, state, actions, getters, mutations }文件默认开启命名空间，文件名会默认注册为模块名。
使用方法：
this.$store.state.example.xxx; this.$store.getters['example/xxx']; this.$store.dispatch('example/xxx'); this.$store.commit('example/xxx'); Axios 拦截器拦截器的用处就是拦截每一次的请求和响应，然后做一些全局的处理。
例如接口响应报错，可以在拦截器里用统一的报错提示来展示，方便业务开发。