VSCode和VUE的初始安裝及簡單使用入門

（版本1.0）

npm run dev 運行工程

• PS F:\SDN\VIMS--前端\vue> cnpm install
• PS F:\SDN\VIMS--前端\vue> cnpm rebuild node-sass
• PS F:\SDN\VIMS--前端\vue> cnpm run dev
  若提示cookie失敗，則輸入：
• PS F:\SDN\VIMS--前端\vue> cnpm install vue-cookies

• PS F:\SDN\VIMS--前端\vue> cnpm run dev

• Vue的組件是.vue或.wxml等文件，沒法被瀏覽器解析，須要被翻譯和打包爲.js文件
  1.輸入cnpm install webpack –g進行安裝打包 。

• cnpm install vue-cli –g 用來生成vue模板的工具

---

（版本2.0）

一：安裝Node.js

1. 在Node.js官網https://nodejs.org/en/download/下載安裝包。
2. 下載後進行安裝。
3. 打開命令行，輸入node -v能夠查看到版本號。輸入npm –v可看到npm版本號。新版的Node.js已自帶npm（相似.net中的nuget包管理器），安裝Node.js時會一塊兒安裝。（未來要更新npm可用這個命令npm intall npm@latest -g）
4. 配置環境變量（這裏就會自動配置好）。
5. 命令行中輸入node， 再輸入console.log("hello"); 用來驗證是否安裝成功。
6. 配置npm的全局模塊的存放路徑和緩存路徑，在node.js的安裝目錄下新建node-cache和node_global兩個文件夾，而後命令行輸入：
   npm config set prefix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"
   未來用npm install xxx -g 安裝之後的模塊就在這兩個文件夾裏。
7. 配置npm的環境變量：系統變量path中新增一個變量：
   C:\Program Files\nodejs\node_global\node_modules，（node安裝在哪就寫哪），而後在用戶變量中修改變量爲C:\Program Files\nodejs\node_global，最後就能夠刪掉C:\Users\xlz\AppData\Roaming下的npm目錄了。

二：安裝cnpm

1. 輸入命令：cnpm install， 完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到cnpm文件夾和它的文件了。

三：安裝webpack（js應用程序的靜態模塊打包器module bundler）

1. 輸入 cnpm install webpack -g 進行安裝，如何報錯則去掉-g。

四：安裝vue-cli（用來生成vue模板的工具）

1. 輸入cnpm install vue-cli -g 進行安裝。

五：新建一個Vue項目測試一下

1. 在某個盤新建一個文件夾，命令行輸入vue init webpack xxx（項目名）進行建立，按下enter鍵進行屢次確認，最後一步選No.
2. cd xxx（項目名）,即進入所建立的項目中。
3. 輸入 cnpm install下載安裝項目的依賴。
4. 輸入cnpm run dev ，而後在瀏覽器經過http://localhost:8080地址訪問。

六：安裝VSCode（官網可下載）

1. 安裝vetur插件（vue語法高亮），eslint插件（智能錯誤監測），安裝open in broswer插件（可以使用alt + b來使用瀏覽器打開當前html文件）。

七：代碼格式化

1. 打開項目根目錄中的.eslintrc.js文件，在rules中添加"space-before-function-paren": ["error", "never"]，目的是爲了讓eslint檢查在函數名和括號之間不能有空格。
2. 安裝vs code擴展工具：vetur、Prettier-Code formatter和ESLint。
3. vs code 用戶設置：文件--首選項--設置：
   在打開的窗口中的「用戶設置」中加入下面內容：
   { // prettier:每行在這個字符數內整合代碼，若是你的屏幕較寬分辨率較高能夠適當加大 "prettier.printWidth": 120, // prettier:是否在每行末尾加上分號 "prettier.semi": false, // prettier:若是爲true，將使用單行不然使用雙引號 "prettier.singleQuote": true, // vetur:對html的內容使用js-beautify-html "vetur.format.defaultFormatter.html": "js-beautify-html" }
4. 按下Alt+Shift+F ，代碼即可格式化了。

八：自動生成代碼塊

1. 在vs code中，使用快捷鍵Ctrl+Shift+P打開搜索欄-->輸入snippet-->選擇首選項（首選項：配置用戶代碼片斷）
2. 輸入vue-->選擇vue.json（Vue）
3. 輸入須要生成的vue組件內容
   { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "<script>", "export default {", " data() {", " return {\n", " }", " },", " methods: {\n", " },", " components: {\n", " }", "}", "</script>\n", "<style>\n", "</style>", "$2" ], "description": "建立一個自定義的vue組件代碼塊" } }
4. 以後在建立vue文件是，輸入vue而後tab一下，基本結構就出來了。

九：經常使用插件推薦

1. Auto Close Tag：自動閉合Html/XML標籤；
2. Auto Rename Tag：自動完成另外一側標籤的同步修改；
3. Beautify：格式化代碼，支持自定義格式化代碼規則；
4. Bracket Pair Colorizer：給括號加上不一樣的顏色，區分不一樣的區塊；
5. Debugger for Chrome：映射vscode上的斷點到chrome上，方便調試；
6. ESlint：js語法糾錯，配置較爲複雜；
7. GitLens：方便查看git日誌；
8. HTML CSS Support：智能提示css類型以及id；
9. Html Snippet ：智能提示Html標籤，以及標籤含義；
10. JavaScript(es6) code snippet ：es6語法智能提示，以及快速輸入；
11. jQuery Code Snippet：jQuery 代碼智能提示；
12. Material Icon Theme 和 vscode-icons：最好的vscode主題；
13. open in browser：支持快捷鍵在瀏覽器中打開html文件；
14. Path Intellisense：自動提示文件路徑，支持各類快速引入文件；
15. Vetur：Vue多功能集成插件。

十：目錄簡介

1. build 裏面是一些操做文件，使用npm run *其實執行的就是這裏的文件；
2. config 配置文件，執行文件須要的配置信息；
3. src 資源文件，全部組件和所用圖片都放在這裏；
   3.1 assert 資源文件夾，放圖片之類的資源；
   3.2 components 組件文件夾，寫的全部組件都放在這個文件夾下；
   3.3 router 路由文件夾，這個決定了頁面的跳轉規則；
   3.4 App.vue 應用組件，全部本身寫的組件都是在這個組件上運行；
   3.5 main.js webpack的入口文件，webpack四大特性：entry入口、output輸出、Loader加載器、plugins插件
4. node_modules 放全部依賴的模塊，每每不上傳此文件（文件多且大）；
5. dist文件，打包後的成品頁面：
   5.1 index.html 就是單頁應用的頁面；
   5.2 static

十一：項目打包

打包命令：npm run build ，打包完成後會在根目錄下生成一個dist文件夾，這個就是最後的成品頁面，須要將打包的路徑改成相對路徑，這個根據build命令一路跟蹤，到config\index.js文件中build對象，將assetsPublicPath中的「/」改成「./」便可，並在build\build.js中將這兩句的提示信息刪掉便可；

十二：Beautify插件配置*.vue

1. 點擊設置，找到beautify.language複製這一段到用戶區，並在html一欄加上vue便可。
2. 文件-->設置-->鍵盤快捷鍵設置，打開編輯keybindings.json，輸入
   { "key": "alt+shift+e",//本身定鍵位 "command": "HookyQR.beautify", "when": "editorFocus" }

十三：ESLint（用於審查代碼規範）的使用配置相關

1. 在初始化項目時選擇使用ESLint管理代碼
   Use ESLint to lint your code? (Y/n)
2. 對文件的解釋：
   2.1 .editorconfig：主要用於配置IDE；
   root = true # 對全部文件有效 //[*js]只對js文件有效 [*] #設置編碼格式 charset = utf-8 #縮進類型 可選space和tab indent_style = space #縮進數量可選整數值2 or 4,或者tab indent_size = 2 #換行符的格式 end_of_line = lf # 是否在文件的最後插入一個空行 可選true和false insert_final_newline = true # 是否刪除行尾的空格 可選擇true和false trim_trailing_whitespace = true

2.2 .eslintignore：放置須要ESLint忽略的文件，只對.js文件有效；
/build/ /config/ /dist/ /src/utils/ /src/router/*.js

2.3 .eslintrc.js：用來配置ESLint的檢查規則；
module.exports = { //此項是用來告訴eslint找當前配置文件不能往父級查找 root: true, //此項是用來指定eslint解析器的，解析器必須符合規則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析 parser: 'babel-eslint', //此項是用來指定javaScript語言類型和風格，sourceType用來指定js導入的方式，默認是script，此處設置爲module，指某塊導入方式 parserOptions: { sourceType: 'module' }, //此項指定環境的全局變量，下面的配置指定爲瀏覽器環境 env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style // 此項是用來配置標準的js風格，就是說寫代碼的時候要規範的寫，若是你使用vs-code我以爲應該能夠避免出錯 extends: 'standard', // required to lint *.vue files // 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規範html的 plugins: [ 'html' ], // add your custom rules here // 下面這些rules是用來設置從插件來的規範代碼的規則，使用必須去掉前綴eslint-plugin- // 主要有以下的設置規則，能夠設置字符串也能夠設置數字，二者效果一致 // "off" -> 0 關閉規則 // "warn" -> 1 開啓警告規則 //"error" -> 2 開啓錯誤規則 // 瞭解了上面這些，下面這些代碼相信也看的明白了 rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // js語句結尾必須使用分號 'semi': ['off', 'always'], // 三等號 'eqeqeq': 0, // 強制在註釋中 // 或 /* 使用一致的空格 'spaced-comment': 0, // 關鍵字後面使用一致的空格 'keyword-spacing': 0, // 強制在 function的左括號以前使用一致的空格 'space-before-function-paren': 0, // 引號類型 "quotes": [0, "single"], // 禁止出現未使用過的變量 // 'no-unused-vars': 0, // 要求或禁止末尾逗號 'comma-dangle': 0 } }

1. 如何在老項目中加入ESLint：
   3.1 在目錄中添加.editorconfig、.eslintrc.js、.eslintignore這三個文件；
   3.2 在package.json的」devDependencies」中加入ESlint所須要的包
   "babel-eslint": "^7.1.1", "eslint": "^3.19.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-html": "^3.0.0", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1",

3.3 在bulid/webpack.base.conf.js文件中加入ESlint規則並生效
// 在module的rules中加入 module: { rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), // 不符合Eslint規則時只警告(默認運行出錯) // emitWarning: !config.dev.showEslintErrorsInOverlay } }, ] }

3.4 從新bulid代碼運行.