一、下載和安裝Vue

官網(wǎng)下載地址Download | Node.js

選擇適合自己的版本，推薦LTS，長久穩(wěn)定版本。 我這里選擇的是Windows Installer(.msi) 64-bit

下載好后，雙擊下載的安裝包。

點next

勾選I accept............，點next 

這里建議更改為自己想要的的安裝目錄，然后點next（可以自己先建好安裝目錄，我這里是提前建好的一個目錄：E:\Java\nodejs）

這里有五個選項，有時間可以看一下，就是安裝的時候會安裝一些組件和npm，同時會添加環(huán)境變量，右側有說明。我們直接點next

這里不用勾選，直接點next

install

 finish

安裝完成后，檢查一下是否安裝成功。

打開cmd，輸入如下指令。 

node -v

npm -v

輸出了版本號就說明安裝成功了。

安裝后的完整目錄：

二、創(chuàng)建全局安裝目錄和緩存日志目錄

 在我們的安裝目錄下，創(chuàng)建名為node_cache和node_global的兩個文件夾。

打開Dos窗口，執(zhí)行如下命令，將npm的全局模塊目錄和緩存目錄配置到我們剛才創(chuàng)建的那兩個目錄。

npm config set prefix "你的安裝目錄\node_global"

npm config set cache "你的安裝目錄\node_cache"

為了以后下載包快速，修改源為淘寶鏡像。（這里修改了，我們就不需要安裝cnpm了，因為cnpm就是Node.js淘寶鏡像加速器，這里配置了就不需要安裝了）

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

查看npm配置修改是否成功

npm config list

同時我們會發(fā)現(xiàn)多了個文件：C:\Users\用戶名\下的.npmrc文件，可以理解為一個記錄當前用戶修改信息的配置文件。如果你把這個文件刪了，那你剛剛修改的那些參數(shù)全沒有了，回歸默認配置。

三、配置環(huán)境變量

在安裝過程中，自動配置了兩個環(huán)境變量一個是環(huán)境變量---用戶變量---Path里面的C:\Users\你的用戶名\AppData\Roaming\npm另一個是環(huán)境變量---系統(tǒng)變量---Path里面的軟件安裝目錄，我們需要增加和修改一下。

 1. 環(huán)境變量---用戶變量---選中Path---點編輯

 將 C:\Users\你的用戶名\AppData\Roaming\npm 修改為 你的安裝目錄\node_global

2. 環(huán)境變量---系統(tǒng)變量---新建

變量名：NODE_PATH

變量值：你的安裝目錄\node_global\node_modules

注：這里的node_modules目錄是還沒有的，但是我們等會把模塊安裝到全局目錄下就會自動生成這個文件夾。

記得在系統(tǒng)變量---Path添加上%NODE_PATH% 

 三、安裝vue

1. 安裝vue.js

npm install vue -g

其中-g是全局安裝，指安裝到global全局目錄去，如果不加-g，模塊就會安裝到當前路徑下的node_modules文件夾下，沒有目錄則自動創(chuàng)建。

如果出現(xiàn)了這個問題，是因為當前用戶沒有這個權限。

網(wǎng)上有些方法是刪除C:\Users\用戶名\下的.npmrc文件，萬萬不可這樣，因為那個文件刪除了，我們前面修改的全局模塊目錄和緩存目錄配置就沒了?。?！到時候vue包就下載到C:\Users\你的用戶名\AppData\Roaming\npm去了，也就是默認的地方去了，那我們前面修改就沒意義了。

正確的打開方式是，用管理員身份運行唄！

Win + s 搜索 “命令提示符”，右鍵以管理員身份運行。

npm install vue -g

2. 安裝webpack模板

npm install webpack -g

此外，在webpack 4x以上，webpack將命令相關的內容都放到了webpack-cli，所以還需要安裝webpack-cli

npm install webpack-cli -g

輸入 webpack -v，能輸出版本號就說明都安裝好了。

3. 安裝腳手架vue-cli

npm install vue-cli -g

輸入vue --version，能輸出版本號就說明安裝好了。

4. 安裝vue-router

npm install vue-router -g

都弄好了我們打開我們自定義的全局模塊目錄下的node_modules文件夾，會發(fā)現(xiàn)安裝的模塊都統(tǒng)一在這里。

四、我的第一個的 vue-cli應用程序

1. 創(chuàng)建項目（最好在cd到D盤、E盤的某個位置，即項目的路徑，否則項目會新建在C:\Users\用戶名\，也可以直接在想要的項目路徑下輸入cmd）可能會出現(xiàn)權限問題，所以我們還是以管理員運行cmd窗口。

2.  創(chuàng)建一個基于webpack模板的vue應用程序

vue init webpack 項目名

根據(jù)自己的需求來操作。

• 項目名是？回車
• 項目描述？回車
• 作者？回車
• 是否安裝編譯器 回車
• 是否安裝vue-router y 回車
• 是否使用ESLint做代碼檢查 n 回車
• 是否安裝單元測試工具 n 回車
• 單元測試相關 n 回車
• 創(chuàng)建完成后直接初始化 n 回車

因為沒有自動初始化，我們按照代碼提示手動初始化

cd myvue

npm run dev

 訪問網(wǎng)址：成功！

總結

到此這篇關于Vue安裝與配置的文章就介紹到這了,更多相關Vue安裝與配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！