手摸手帶你使用Vue-Cli3搭建前端開發環境

vue-cli搭建前端開發環境指南

一、vscode編輯器配置

1、ESLint拓展安裝

ESLint

• 應用商店搜索安裝ESLint
• 添加保存文件時自動修復代碼格式功能

// 文件->首選項->設置->在setting.json中編輯 添加代碼：
"editor.codeActionsOnSave": {
    "source.fixAll": true
}

• ctrl s操作觸發當前文件修復

Prettier - Code formatter

• 應用商店搜索安裝Prettier - Code formatter
• 插件安裝完成後，-> 配置拓展設置 prettier.requireConfig": true

• 格式化文檔操作觸發

二、項目創建

1、環境準備

• Node.js 8.9 或更高版本
• Vue-Cli3

2、創建項目

• 確定項目所在目錄，當前目錄下打開Powershell窗口，輸入指令：

vue create projectName

• 選擇手動安裝類型（Manually）

注：以下爲初次使用本配置教程，如果已按教程配置過，可直接選擇已保存的配置創建項目！

• 選擇依賴需求（上下鍵切換，空格選擇，回車確認）

• 選擇是否使用history路由模式

• 選擇css預處理器

 

• 選擇格式效驗方式

• 選擇什麼時候效驗格式

 

• 選擇測試框架

測試框架 Mocha 實例教程 - 阮一峯

• 選擇項目的配置文件放哪，這裏選擇第一項單獨存放

• 是否保存該配置作爲後續項目的可選配置，選擇是，並填寫配置名稱，後期項目直接採用此配置

等待安裝完成後，用vscode編輯器打開項目。

三、配置eslint

1、配置eslint規則

vscode打開創建的項目目錄，根路徑下打開.eslintrc.js，具體eslint參數說明請見eslint參數文檔，修改rules如下：

"no-alert": 0,
"no-array-constructor": 2,
"no-bitwise": 0,
"no-caller": 1,
"no-catch-shadow": 2,
"no-class-assign": 2,
"no-cond-assign": 2,
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-const-assign": 2,
"no-constant-condition": 2,
"no-continue": 0,
"no-control-regex": 2,
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-delete-var": 2,
"no-div-regex": 1,
"no-dupe-keys": 2,
"no-dupe-args": 2,
"no-duplicate-case": 2,
"no-else-return": 2,
"no-empty": 2,
"no-empty-character-class": 2,
"no-empty-label": 0,
"no-eq-null": 2,
"no-eval": 1,
"no-ex-assign": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-extra-boolean-cast": 2,
"no-extra-parens": 2,
"no-extra-semi": 2,
"no-fallthrough": 1,
"no-floating-decimal": 2,
"no-func-assign": 2,
"no-implicit-coercion": 1,
"no-implied-eval": 2,
"no-inline-comments": 0,
"no-inner-declarations": [2,"functions"],
"no-invalid-regexp": 2,
"no-invalid-this": 2,
"no-irregular-whitespace": 2,
"no-iterator": 2,
"no-label-var": 2,
"no-labels": 2,
"no-lone-blocks": 2,
"no-lonely-if": 2,
"no-loop-func": 1,
"no-mixed-requires": [0,false],
"no-mixed-spaces-and-tabs": [2,false],
"linebreak-style": [0,"windows"],
"no-multi-spaces": 1,
"no-multi-str": 2,
"no-multiple-empty-lines": [1,{"max":2}],
"no-native-reassign": 2,
"no-negated-in-lhs": 2,
"no-nested-ternary": 0,
"no-new": 1,
"no-new-func": 1,
"no-new-object": 2,
"no-new-require": 2,
"no-new-wrappers": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-param-reassign": 2,
"no-path-concat": 0,
"no-plusplus": 0,
"no-process-env": 0,
"no-process-exit": 0,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-restricted-modules": 0,
"no-return-assign": 1,
"no-script-url": 0,
"no-self-compare": 2,
"no-sequences": 0,
"no-shadow": 2,
"no-shadow-restricted-names": 2,
"no-spaced-func": 2,
"no-sparse-arrays": 2,
"no-sync": 0,
"no-ternary": 0,
"no-trailing-spaces": 1,
"no-this-before-super": 0,
"no-throw-literal": 2,
"no-undef": 1,
"no-undef-init": 2,
"no-undefined": 2,
"no-unexpected-multiline": 2,
"no-underscore-dangle": 1,
"no-unneeded-ternary": 2,
"no-unreachable": 2,
"no-unused-expressions": 2,
"no-unused-vars": [2,{"vars": "all","args": "after-used"}],
"no-use-before-define": 2,
"no-useless-call": 2,
"no-void": 2,
"no-var": 0,
"no-warning-comments": [1,{"terms": ["todo","fixme","xxx"],"location": "start"}],
"no-with": 2,
"array-bracket-spacing": [2,"never"],
"arrow-parens": 0,
"arrow-spacing": 0,
"accessor-pairs": 0,
"block-scoped-var": 0,
"brace-style": [1,"1tbs"],
"callback-return": 1,
"camelcase": 2,
"comma-dangle": [2,"never"],
"comma-spacing": 0,
"comma-style": [2,"last"],
"complexity": [0,11],
"computed-property-spacing": [0,"never"],
"consistent-return": 0,
"consistent-this": [2,"that"],
"constructor-super": 0,
"curly": [2,"all"],
"default-case": 2,
"dot-location": 0,
"dot-notation": [0,{"allowKeywords": true}],
"eol-last": 0,
"eqeqeq": 2,
"func-names": 0,
"func-style": [0,"declaration"],
"generator-star-spacing": 0,
"guard-for-in": 0,
"handle-callback-err": 0,
"id-length": 0,
"indent": [0,4],
"init-declarations": 0,
"key-spacing": [0,{"beforeColon": false,"afterColon": true}],
"lines-around-comment": 0,
"max-depth": [0,4],
"max-len": [0,80,4],
"max-nested-callbacks": [0,2],
"max-params": [0,3],
"max-statements": [0,10],
"new-cap": 2,
"new-parens": 2,
"newline-after-var": 2,
"object-curly-spacing": [0,"never"],
"object-shorthand": 0,
"one-var": 1,
"operator-assignment": [0,"always"],
"operator-linebreak": [2,"after"],
"padded-blocks": 0,
"prefer-const": 0,
"prefer-spread": 0,
"prefer-reflect": 0,
"quotes": [1,"double"],
"radix": 2,
"id-match": 0,
"require-yield": 0,
"semi": [2,"always"],
"semi-spacing": [0,{"before": false,"after": true}],
"sort-vars": 0,
"space-after-keywords": [0,"always"],
"space-before-blocks": [0,"always"],
"space-before-function-paren": [0,"always"],
"space-in-parens": [0,"never"],
"space-infix-ops": 0,
"space-return-throw-case": 0,
"space-unary-ops": [0,{"words": true,"nonwords": false}],
"spaced-comment": 0,
"strict": 2,
"use-isnan": 2,
"valid-jsdoc": 0,
"valid-typeof": 2,
"vars-on-top": 2,
"wrap-iife": [2,"inside"],
"wrap-regex": 0,
"yoda": [2,"never"]

2、配置eslint批量修復指令

npm i eslint-plugin-vuefix@latest --save-dev

package.json的script添加指令

"fix": "node_modules/.bin/eslint --ext .js,.vue src --fix"

終端運行指令，批量修復代碼格式

npm run fix

四、配置目錄結構

目錄結構本着“約定優於配置”的原則，約定目錄名稱和嵌套結構，儘量縮小自由發揮空間！

目錄結構約定優先級：

• 優先級 A：必要的
• 優先級 B：強烈推薦
• 優先級 C：推薦
• 優先級 D：可選

添加api、request、styles、utils文件夾，各文件夾使用說明如圖：

├─api         //（必要）    業務接口文件夾
│  └─業務功能名.js   //（強烈推薦） 創建以業務功能爲名稱的js文件
├─assets       //（必要）    靜態文件目錄
│  ├─icons      //（強烈推薦） 字體
│  └─images      //（強烈推薦） 圖片
├─components     //（必要）    存放公共組件
│  └─公共組件.vue
├─requests      //（必要）  數據請求攔截統一配置文件夾
│  ├─index.js     //（強烈推薦）數據請求攔截統一配置文件
│  └─mock.js     //（可選）  
├─router       //（必要）  路由文件夾
│  ├─index.js     //（必要）  路由總導出文件
│  └─modules     //（必要）  存放業務路由文件
│      └─業務功能名.js //（強烈推薦） 導出所有業務功能路由數組
├─store        //（必要）  狀態管理文件夾
│  ├─getters.js    //（可選）  狀態複雜時，多狀態統一配置文件
│  ├─index.js     //（必要）    狀態總導出文件
│  └─modules     //（可選）  狀態複雜時，分類存放狀態文件
├─styles       //（必要）  公共樣式文件夾
│  ├─common.less   //（必要）  存放公共樣式，此處只約定名稱，文件類型根據預處理更改
│  ├─reset.css    //（必要）  樣式重置文件
│  └─variable.less  //（必要）  公共樣式風格變量
├─utils        //（必要）  公共插件文件夾
│  └─公共插件js
└─views
    ├─App.vue
    ├─main.js
    └─功能名稱        //（強烈推薦）按功能名稱創建文件夾
        └─菜單名稱      //（強烈推薦）按菜單名稱創建文件夾
            ├─components //（強烈推薦）存放依賴頁面
            └─Index.vue  //（強烈推薦）首頁

更多原創文章，請到我的個人博客copyright @ xmwarrior