vue-cli建立的管理后台项目优化

背景

入职新公司，接手一个管理后台项目，发现项目虽然能用，可是可优化的点太多了

• axios没有设置请求和响应拦截，对服务器的状态只是单一抛网络错误处理
• 没有设置全局错误处理器，没有404等页面，没有错误上报后台，发生错误每每须要使用者告知
• 本地开发热更新很慢，大文件没有抽dll
• 线上静态资源没有gzip压缩，直接让页面请求1M的资源
• eslint的prettier规则与vetur的规则冲突，致使格式化的时候常常出问题
• 代码风格不统一，不语义化，例如：currentLang，不点进具体方法都不知道原来返回的是当前是不是中文环境
• 先后端项目不分离，dist目录竟然要上传git仓库，致使每次协做开发必然会文件冲突，而且review代码也是个灾难
• 注释不多，变量语义化十分不明确，不少magic number
• 接口文档很混乱，新入职的很难去查某个接口的字段表示的意义
• utils方法基本没有，每次用到都要本身去写或者网上去找
• 公用组件抽象不多，mixin也不多
• README.md 对于项目的介绍过于粗略，新入职的很难快速上手
• css处理器使用的是postcss，虽然是下一代css语法，可是感受比起sass等预处理器，postcss仍是很差用
• 权限处理，不是根据当前登陆的用户去请求接口分配准入菜单的方式，而经过配置关键key的方式，前端和服务器都要同时保存一份key（前端不必去保存）

吐槽一句，不知道以前的人是怎么忍受得了的。

世上本没有项目优化，团队协做开发的人多了，便有了项目优化。 --- 沃滋基-硕德

其实对于上面的项目，已经有一部分必须先优化的已经优化了。例如

• 先后端分离，不提交dist目录，只提交业务文件，用gitlab走ci部署
• 大文件走CDN（其实我是想走dll的，可是领导以为cdn比较好）
• utils文件内容丰富
• 变量加注释，至少vuex里面的全局属性维护者得知道什么意思吧

最近修改了eslint配置，而后顺便跟大伙儿分享一下eslint+prettier配置

因为项目以前是直接配置vscode的settings.json，并无把这份配置公用，因此这次修改直接增长以下文件：

• .editorconfig
• .eslintignore
• .pretterrc.js

以此让全部拉下这份项目的人代码的统一

show the code

.prettierrc.js

module.exports = {
  eslintIntegration: true,
  tabWidth: 2,
  printWidth: 80,
  singleQuote: true, // 用单引号
  semi: true // 句末加分号
};

复制代码

eslintrc.js 贴关键代码

extends: [
    'plugin:vue/recommended', // vue语法校验
    'eslint:recommended' // js语法校验
  ],
 env: {
    browser: true,
    commonjs: true,
    node: true,
    es6: true
  },
复制代码

具体的规则可查看：

vue的规则

js语法规则

而后rules的话是根据现有的规则而后再根据项目使用符合本身公司风格的额外规则。

最后的话还要在项目根目录增长.vscode/settings.json

{
    "vetur.format.defaultFormatter.html": "js-beautify-html", // 格式化 vue 项目中的 html 代码
    // 根据文件后缀名定义vue文件类型
    "files.associations": {
      "*.vue": "vue"
    },
    // 配置 ESLint 检查的文件类型
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    // 保存时eslint自动修复错误
    "eslint.autoFixOnSave": true,
    // 保存自动格式化
    "editor.formatOnSave": true
  }
  
复制代码

至此，配置完成。

Tips 发现部门的前端er竟然没安装Project Manager管理项目，强烈推荐他们安装了一波，由于他们习惯在一个窗口打开多个项目，可是settings.json是根据项目生效的，因此若是在一个窗口多个项目的话，致使settings不生效。