关于前端:收下这款-Vue-项目模版它将让你的开发效率在-2021-年提高-50

这是什么

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 name="example" />

<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 文件。

Vuex

Vuex 同样实现了主动注册，开发只需关注 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 拦截器

拦截器的用途就是拦挡每一次的申请和响应，而后做一些全局的解决。

例如接口响应报错，能够在拦截器里用对立的报错提醒来展现，不便业务开发。

本框架提供了一份拦截器参考代码 src/api/index.js，因为每个公司提供的接口标准不同，所以该文件须要开发者依据各自公司的接口去定制对应的拦截器。

代码很简略，首先初始化 axios 对象，而后 axios.interceptors.request.use() 和 axios.interceptors.response.use() 就别离是申请和响应的拦挡代码了。

参考代码里只做了简略的拦挡解决，例如申请的时候会主动带上 token，响应的时候会依据错误信息判断是登录生效还是接口报错。

疾速创立文件

该性能基于 plop 实现。

开发过程中，防止不了手动去频繁创立页面、组件等文件，并且还要在文件里写一些必要的代码，是不是感觉很麻烦？当初你能够用更简洁的形式来解决这所有。

模版默认提供了 page(页面 / 布局)、component(组件)、store(全局状态) 三个模版文件，通过 yarn new 指令能够自行抉择。

在理论我的项目开发中，倡议依据我的项目定制适宜我的项目的模版文件，能够大大提高开发效率，当多人合作开发时，也能对立局部规范。

模版目录为 ./plop-templates/，如果是新建模版，记得在我的项目根目录 plopfile.js 里援用一下。

代码标准：IDE 编辑器

为保障代码格调对立，对立应用 VS Code 做为开发 IDE，并装置以下扩大：

• EditorConfig for VS Code
• ESLint
• Vetur
• Prettier – Code formatter
• stylelint

装置完后在 settings.json 中减少如下配置：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
}

最终成果为，在保留时，会主动对以后文件进行代码格式化操作。

代码标准：Git 钩子

上述操作仅对代码的写法标准进行格式化，例如缩进、空格、结尾的分号等。

而在提交代码时，Git 的钩子会查看代码中是否有谬误，这些谬误是 IDE 无奈主动修复的，例如呈现未应用过的变量。如果有谬误，则会勾销此次提交，直到开发者修复完所有谬误后才容许提交胜利，确保仓库里的代码相对正确。

可通过批改 .eslintignore 和 .stylelintignore 疏忽无需做代码标准的文件，例如在我的项目中援用了一些第三方的插件或组件，咱们就能够将其疏忽

如果 git init 仓库初始化是在依赖包装置之后执行的，则无奈初始化 Git 钩子，倡议在 git init 之后再执行一遍 yarn 或者 npm i，重新安装一遍依赖包。

代码标准：配置代码标准

配置文件次要有 3 处，别离为 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

批改结束后，再别离执行上面两句命令：

yarn run lint
yarn run stylelint

该操作会将代码进行一次格局校验，如果规定反对主动修复，则会将不合乎规定的代码主动进行格式化。

以下面的例子，当缩进规定调整后，咱们无需手动去每个文件调整，通过命令能够主动利用新的缩进规定。

扩大性能

除了以上罕用性能介绍外，vue-automation 还反对 mock、CDN、GZip 和挪动端等相干配置，不便适应任何开发场景，真正做到了开箱即用。

生态

在我目前所在的公司里，vue-automation 曾经稳固用于数十个实在我的项目上，笼罩企业官网、商城、数字大屏、微信公众号等多个不同畛域。

同时在其根底上，扩大开发出了一套独立的 中后盾零碎框架：Fantastic-admin，在易用的根底上保障了性能全面，超过市面上大部分同类框架。

新年瞻望

在 2021 年，vue-automation 将会全新降级，全面反对 Vue 3

最初祝大家新年快乐，让咱们一起对 2020 说再见吧！