Vuejs 安裝NPM環境、cli3腳手架以及VsCode配置

參考地址：

• https://www.jianshu.com/p/7834fc55e9e8 運行Vue項目
• https://www.cnblogs.com/webwangjie/p/11463294.html 安裝報錯，使用CNPM 鏡像下載
• https://www.jianshu.com/p/70d9c04b8bac VScode環境
• https://www.jianshu.com/p/3f8bfe70433b 搭建CLI3

1.安裝Node.js

• https://nodejs.org/en/ 下載安裝包，左側的即可，默認安裝
• CMD輸入 node -v 查看是否出現相應版本號。
• npm包管理器是集成在node中，輸入 npm -v，查看是否出現相應版本號

2.安裝cnpm

用的是淘寶鏡像，因為國外網站打不開

• CMD輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org,后面可以使用cnpm 代替npm

3.創建cli3

我對比教程，我跳過了vue init webpack firstVue，這個我在創建的時候沒有安裝，建議先按照我的步驟走，如果出錯，再進行嘗試。如果是clone別人的項目，需要npm install安裝一下modules環境

• CMD 命令cd到項目文件夾（D: 直接進入D盤）
• CMD 命令 vue create hello-word3 --創建項目名稱
• 選擇 Manually select features 回車 --default(默認配置)和Manually select features(手動配置) 默認配置只有babel和eslint其他的都要自己另外再配置，所以我們選第二項手動配置。
  在每次選擇手動配置之后，會詢問你是否保存配置，也就是圖片中的koro選項，這樣以后我們在進行創建項目的時候只需使用原先的配置就可以了，而不用再進行配置。
• 選擇配置,我一般選擇Router ,Vuex ,空格選中，回車結束。詳細的可以看這位博主寫的。https://www.jianshu.com/p/3f8bfe70433b

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
// 檢查項目所需的功能:(按<space>選擇，<a>切換所有，<i>反轉選擇）
>( ) TypeScript                                 // 支持使用 TypeScript 書寫源碼
 ( ) Progressive Web App (PWA) Support          // PWA 支持
 ( ) Router                                     // 支持 vue-router
 ( ) Vuex                                       // 支持 vuex
 ( ) CSS Pre-processors                         // 支持 CSS 預處理器。
 ( ) Linter / Formatter                         // 支持代碼風格檢查和格式化。
 ( ) Unit Testing                               // 支持單元測試。
 ( ) E2E Testing  //

• 選擇放入 In package.json 文件中
• 選擇yes 保存配置，並且命名

• Save this as a preset for future projects? (Y/n) // 是否記錄一下以便下次繼續使用這套配置

• 選保存之后，會讓你寫一個配置的名字：

• Save preset as: name // 然后你下次進入配置可以直接使用你這次的配置了

4.啟動圖形化界面

• CMD命令 vue -ui （這個屬於了解，用到Vuex管理的適合，需要安裝一個Chrome插件檢測）

5.運行

• cmd界面 npm run serve
• Vscode ,終端敲如上命令（報錯的話請注意，一定要CD到項目文件中啟動）

6.VsCode設置

• 在.Vscode文件中，launch.json將原本的內容替換為如下,就可以F5直接打開網頁了

{
    // 使用 IntelliSense 了解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    // "configurations": [
    //     {
    //         "type": "node",
    //         "request": "launch",
    //         "name": "啟動程序",
    //         "skipFiles": [
    //             "<node_internals>/**"
    //         ],
    //         "program": "${workspaceFolder}\\TestProject\\hello-word\\src\\main.js"
    //     }
    // ]
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "vuejs: chrome",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///./src/*": "${webRoot}/*"
          }
        },
        {
          "type": "firefox",
          "request": "launch",
          "name": "vuejs: firefox",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
        }
      ]
}

• VsCode必備插件：https://liubing.me/vscode-vue-setting.html
• 備注：https://juejin.im/post/5e612534e51d4527017971a2 這個應該是一個H5頁面的模板，先mark