Vue環境搭建+VSCode+Win10

1、安裝Node.js（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.在個人win10系統中能夠看到環境變量也已經自動配置好了。以下圖

同時也可年看到npm包管理器的默認下載目錄，以下圖

5.在命令行輸入node回車，再輸入console.log(「hello」); 注意以英文分號結束，查看到輸出結果就說明安裝成功了。
6配置npm的全局模塊的存放路徑以及緩存的路徑
(先要退出上一步已進入的node，輸入.exit或者按兩次Ctrl+C就退出了node)
在node.js的安裝目錄（C:\Program Files\nodejs）下新建兩個文件夾node_cache和node_global方便集中管理。(由於默認會將模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中，佔C盤空間，因此下面兩行的命令是修改模塊保存的路徑，自已想放哪都行，這裏我就懶得放其它盤了)
而後在命令行輸入
npm config set prefix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"
未來用npm install XXX -g安裝之後模塊就在這兩個文件夾裏。

而後在C:\Users\[你的用戶名]下用記事本打開.npmrc文件肯定以下圖所示就說明設置成功了。

7.配置npm的環境變量（由於上面修改了路徑）

在系統變path中新增一個變量C:\Program Files\nodejs\node_global\node_modules

而後在用戶變量中修改變量爲C:\Program Files\nodejs\node_global

最後就能夠刪掉C:\Users\xlz\AppData\Roaming下的npm目錄了。（這裏得顯示隱藏的項目才能看到AppData目錄）
（注意：修改了環境變量後要從新打開命令行界面）
8..測式npm
安裝個module測試下，例如最經常使用的express模塊。
輸入命令npm install express –g
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下就可看到express文件夾和它的文件了。
 
2、安裝cnpm（淘寶的npm）

由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常。
1.下載安裝cnpm而且使用淘寶的服務器作爲的包源 。
輸入命令：npm install –g cnpm --registry=https://registry.npm.taobao.org注意registry前面是兩個槓啊。
完成後輸入cnpm –v可查看到相關信息。

完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到cnpm文件夾和它的文件了。以下圖

還有在C:\Program Files\nodejs\node_global可看到cnpm和cnpm.cmd兩個文件。
 
3、安裝webpack（js應用程序的靜態模塊打包器(module bundler)）

當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。
Vue的組件是.vue或.wxml等文件，沒法被瀏覽器解析，須要被翻譯和打包爲.js文件
1.輸入cnpm install webpack –g安裝 。
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到webpack文件夾和它的文件了,還有在C:\Program Files\nodejs\node_global可看到webpack和webpack.cmd兩個文件。
 
4、安裝vue-cli（用來生成vue模版的工具）

vue-cli這個構建工具大大下降了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，至關於啓動了一個請求服務器。
vue-cli是腳手架，就是用配置好的模版快速搭起一個項目來，省去配置webpack的基本內容。經過vue init 模版名 項目名，而後再有幾個簡單設置就建起項目了。
1.輸入cnpm install vue-cli –g安裝，
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到vue-cli文件夾和它的文件了,還有在C:\Program Files\nodejs\node_global可看到vue的六個文件。

以下圖

5、新建一個Vue項目測式一下

爲了訪止出現什麼問題，我關閉命令行界面後從新打開命令行界面。
1.我在D盤新建一個名爲VueProjects的文件夾來專門存放vue項目。
2.在命行先輸入d: 進入D盤，再輸入cd d:\VueProjects進入到此目錄。
3.輸入vue init webpack test1新建一個項目，

在新建過程當中會要輸入幾回回車和y，以下圖（記得最後一步選擇No I will handle that myselft，也就是建立完項目後由我本身來下載依賴）

完成後會建立項目，以下圖

而後輸入cd test1進入項目目錄，

輸入cnpm install下載安裝項目的依賴(注意不是用的npm，而是cnpm，這樣快些)，完成後可在目錄中看到全部有依賴，以下圖

輸入cnpm run dev(注意不是用的npm，而是cnpm)後會給出提示讓咱們在瀏覽器經過http://localhost:8080地址訪問。
 
6、安裝VSCode（ 官網https://code.visualstudio.com/Download）

安裝過程就不寫了，下一步下一步就完成了。
1.安裝vetur插件，是vue語法的高亮插件。
2.安裝eslint插件，是智能錯誤檢測插件。

這兩年插件安裝，先要打開：文件-〉首選項-〉設置，在用戶設置中輸入以下代碼

    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
      }
     
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
     
    "eslint.options": {
        "plugins": ["html"]
    }

也能夠經過左邊的擴展，而後搜索相應插件安裝。

3.安裝prettier插件，是代碼格式化工具

裝完後重啓VSCode，然打開設置，搜索eslint，接首在右側用戶配置添加相關配置

具體相關配置代碼以下：

    "editor.detectIndentation": false,
      "editor.tabSize": 2,
      "prettier.tabWidth": 2,
      "prettier.eslintIntegration": true, //讓prettier使用eslint的代碼格式進行校驗
      "prettier.semi": false, //去掉代碼結尾的分號
      "prettier.singleQuote": true, //使用帶引號替代雙引號
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和後面的括號之間加個空格
      "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
      "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化

4.打開項目test1

5.運行項目

在終端輸入cnpm install先檢查和下載依賴，而後輸入cnpm run dev運行項目，以下圖

最後給出提示，打開瀏覽器輸入http://localhost:8080這個地址就可訪問了。

7、VS2017中使用npm

1.新建一個asp.net core空白項目。

2.設置nodejs程序所在目錄（注意排在.\node_modules\.bin下面）

3.打開cmd 或者powershell，切換到asp.net core項目目錄下。

4.輸入要安裝的js包，例如我這裏要下載安裝oidc-client ： cnpm install oidc-client

5.而後在vs2017中就能夠看到了