要用vue必須要先安裝nodejs

nodejs的安裝及環境配置

1.下載安裝包

下載地址：

https://nodejs.org/zh-cn/download/

2.安裝程序

下載完成后，雙擊安裝包開始安裝

①點擊next

②點同意、next

③默認路徑是C:\Program Files\nodejs\，可修改

④根據自己的需要進行選擇，我選的默認，之后點next

• Node.js runtime ：表示運行環境
• npm package manager：表示npm包管理器
• online documentation shortcuts ：在線文檔快捷方式
• Add to PATH：添加到環境變量

⑤這個不勾選，直接next即可

這句話的意思是：自動安裝必要的工具。請注意，這也將安裝Chocolatey。安裝完成后，腳本將在新窗回中彈出。

⑥install安裝

⑦finish完成安裝

⑧查看系統變量發現.msi格式的安裝包已經將node啟動程序添加到系統環境變量path中

查看

打開cmd窗口，輸入 node -v 查看node版本

輸入 npm -v 查看npm版本

3.環境配置

①打開安裝的目錄，在安裝目錄下新建兩個文件夾：node_cache和node_global

②用管理員身份運行cmd窗口

輸入 npm config set prefix “你的安裝目錄\node_global” 和 npm config set cache “你的安裝目錄\node_cache” 命令，將npm的全局模塊目錄和緩存目錄配置到我們剛才創建的那兩個目錄

npm config set prefix "D:\Program Files\nodejs\node_global"npm config set cache "D:\Program Files\nodejs\node_cache"

③配置環境變量

系統屬性–高級–環境變量

在系統變量中新建 變量名：NODE_PATH 變量值：D:\Program Files\nodejs\node_global\node_modules

編輯lenovo的用戶變量中的Path，將默認的C盤下的AppData\Roaming\npm修改成D:\Program Files\nodejs\node_global，點擊確定

在系統變量的Path中添加NODE_PATH，點擊確定

4.測試

配置完成后安裝一個module測試下，打開cmd窗口，輸入一下命令進行模塊的全局安裝

npm install express -g   // -g是全局安裝的意思

5.修改倉庫鏡像源地址

查看當前npm倉庫鏡像地址

npm config get registry

修改倉庫鏡像地址為淘寶鏡像

npm config set registry https://registry.npm.taobao.org/

安裝vue

使用管理員命令運行cmd，運行以下命令

這個命令安裝好之后是2.9.6版本的，下載最新版本的命令是：npm install -g @vue/cli

如果之前安過，且如果確定可以覆蓋現有的文件，可以使用--force參數來強制安裝：npm install -g @vue/cli --force

npm install vue -g

出現以下錯誤就把鏡像換為華為源

修改倉庫鏡像地址為華為源

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

出現下面即安裝成功

安裝webpack模板

npm install webpack -g

安裝webpack-cli

npm install webpack-cli -g

安裝腳手架vue-cli

npm install vue-cli -g

輸入 vue --version 能看到版本號即成功安裝

安裝 vue-router

npm install vue-router -g

安裝好之后打開 node_modules文件夾，可以看到安裝的模塊都在這里

瀏覽器插件安裝(在chrome、 Edge 中進行安裝)

Edge

打開瀏覽器的擴展商店

https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home

在搜索框輸入Vue Devtools—獲取

點擊添加擴展

在瀏覽器中打開一個包含vue的網頁，F12打開開發者工具，會看到一個新的Vue選項卡，點擊它可以開始調試

chrome

打開chrome的擴展程序（可直接在地址欄輸入：chrome://extensions/），需要打開開發者模式

接著呢，點擊【加載已解壓的擴展程序】選擇我們剛剛下載的插件，或者直接將插件拖拽到該區域，----添加擴展程序

插件：

在瀏覽器中打開一個包含vue的網頁，F12打開開發者工具，會看到一個新的Vue選項卡，點擊它可以開始調試