Vue 環境搭建 + vscode + Win10
一、安裝Node.js
-
在Node.js官網https://nodejs.org/en/download/下載安裝包。
-
下載後進行安裝。
-
開啟命令列,輸入node -v可以檢視到版本號。輸入npm –v可看到npm版本號。
新版的Node.js已自帶npm(類似.net中的nuget包管理器),安裝Node.js時會一起安裝。(將來要更新npm可用這個命令npm intall [email protected] -g) -
在我的win10系統中可以看到環境變數也已經自動配置好了。如下圖
同時也可以看到npm包管理器的預設下載目錄,如下圖
-
開啟命令列,輸入console.log(“hello”); 注意以英文分號結束,檢視到輸出結果就說明安裝成功了。 可以通過.exit 或者按兩次Ctrl + c 既可以退出
-
配置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安裝以後模組就在這兩個資料夾裡。 -
配置npm的環境變數(因為上面修改了路徑)
在系統變path中新增一個變數C:\Program Files\nodejs\node_global\node_modules
然後在使用者變數中修改變數為C:\Program Files\nodejs\node_global
最後就可以刪掉C:\Users\xlz\AppData\Roaming下的npm目錄了。(這裡得顯示隱藏的專案才能看到AppData目錄)
(注意:修改了環境變數後要重新開啟命令列介面) -
測式npm
安裝個module測試下,例如最常用的express模組。
輸入命令npm install express –g
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下就可看到express資料夾和它的檔案了。
二、安裝 cnpm (淘寶npm)
因為npm安裝外掛是從國外伺服器下載,受網路影響大,可能出現異常。
- 下載安裝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兩個檔案。
之後你可以使用 npm 安裝 或者cnpm 來安裝
安裝webpack(js應用程式的靜態模組打包器(module bundler))
當 webpack 處理應用程式時,它會遞迴地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模組,然後將所有這些模組打包成一個或多個 bundle。
Vue的元件是.vue或.wxml等檔案,無法被瀏覽器解析,需要被翻譯和打包為.js檔案
- 輸入cnpm install webpack –g安裝 。
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到webpack資料夾和它的檔案了,還有在C:\Program Files\nodejs\node_global可看到webpack和webpack.cmd兩個檔案。
四:安裝vue-cli(用來生成vue模版的工具)
vue-cli這個構建工具大大降低了webpack的使用難度,支援熱更新,有webpack-dev-server的支援,相當於啟動了一個請求伺服器。
vue-cli是腳手架,就是用配置好的模版快速搭起一個專案來,省去配置webpack的基本內容。通過vue init 模版名 專案名,然後再有幾個簡單設定就建起專案了。
- 輸入cnpm install vue-cli –g安裝,完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到vue-cli資料夾和它的檔案了,還有在C:\Program Files\nodejs\node_global可看到vue的六個檔案。
如下圖
轉載來源 Vue環境搭建+VSCode+Win10