（版本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
- 在Node.js官網https://nodejs.org/en/download/下載安裝包。
- 下載后進行安裝。
- 打開命令行，輸入node -v可以查看到版本號。輸入npm –v可看到npm版本號。新版的Node.js已自帶npm（類似.net中的nuget包管理器），安裝Node.js時會一起安裝。（將來要更新npm可用這個命令npm intall npm@latest -g）
- 配置環境變量（這里就會自動配置好）。
- 命令行中輸入node， 再輸入console.log("hello"); 用來驗證是否安裝成功。
- 配置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 安裝以后的模塊就在這兩個文件夾里。 - 配置npm的環境變量：系統變量path中新增一個變量：
C:\Program Files\nodejs\node_global\node_modules，（node安裝在哪就寫哪），然后在用戶變量中修改變量為C:\Program Files\nodejs\node_global，最后就可以刪掉C:\Users\xlz\AppData\Roaming下的npm目錄了。
二：安裝cnpm
- 輸入命令：cnpm install， 完成后在C:\Program Files\nodejs\node_global\node_modules目錄下可看到cnpm文件夾和它的文件了。
三：安裝webpack（js應用程序的靜態模塊打包器module bundler）
- 輸入 cnpm install webpack -g 進行安裝，如何報錯則去掉-g。
四：安裝vue-cli（用來生成vue模板的工具）
- 輸入cnpm install vue-cli -g 進行安裝。
五：新建一個Vue項目測試一下
- 在某個盤新建一個文件夾，命令行輸入vue init webpack xxx（項目名）進行創建，按下enter鍵進行多次確認，最后一步選No.
- cd xxx（項目名）,即進入所創建的項目中。
- 輸入 cnpm install下載安裝項目的依賴。
- 輸入cnpm run dev ，然后在瀏覽器通過http://localhost:8080地址訪問。
六：安裝VSCode（官網可下載）
- 安裝vetur插件（vue語法高亮），eslint插件（智能錯誤監測），安裝open in broswer插件（可使用alt + b來使用瀏覽器打開當前html文件）。
七：代碼格式化
- 打開項目根目錄中的.eslintrc.js文件，在rules中添加"space-before-function-paren": ["error", "never"]，目的是為了讓eslint檢查在函數名和括號之間不能有空格。
- 安裝vs code擴展工具：vetur、Prettier-Code formatter和ESLint。
- 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
}
}```
3. 如何在老項目中加入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代碼運行.