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不生效。