收下这款 Vue 项目模版,它将让你的开发效率在 2021 年提高 50% (2)

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

代码很简单,首先初始化 axios 对象,然后 axios.interceptors.request.use() 和 axios.interceptors.response.use() 就分别是请求和响应的拦截代码了。

参考代码里只做了简单的拦截处理,例如请求的时候会自动带上 token ,响应的时候会根据错误信息判断是登录失效还是接口报错。

快速创建文件

该功能基于 plop 实现。

开发过程中,避免不了手动去频繁创建页面、组件等文件,并且还要在文件里写一些必要的代码,是不是觉得很麻烦?现在你可以用更简洁的方式来处理这一切。

收下这款 Vue 项目模版,它将让你的开发效率在 2021 年提高 50%

模版默认提供了 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 说再见吧!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspjfs.html