一、下載和安裝Vue

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

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

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

點(diǎn)next

勾選I accept............，點(diǎn)next 

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

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

這里不用勾選，直接點(diǎn)next

install

 finish

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

打開cmd，輸入如下指令。 

node -v

npm -v

輸出了版本號(hào)就說明安裝成功了。

安裝后的完整目錄：

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

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

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

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

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

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

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

查看npm配置修改是否成功

npm config list

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

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

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

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

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

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

變量名：NODE_PATH

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

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

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

 三、安裝vue

1. 安裝vue.js

npm install vue -g

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

如果出現(xiàn)了這個(gè)問題，是因?yàn)楫?dāng)前用戶沒有這個(gè)權(quán)限。

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

正確的打開方式是，用管理員身份運(yùn)行唄！

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

npm install vue -g

2. 安裝webpack模板

npm install webpack -g

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

npm install webpack-cli -g

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

3. 安裝腳手架vue-cli

npm install vue-cli -g

輸入vue --version，能輸出版本號(hào)就說明安裝好了。

4. 安裝vue-router

npm install vue-router -g

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

四、我的第一個(gè)的 vue-cli應(yīng)用程序

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

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

vue init webpack 項(xiàng)目名

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

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

因?yàn)闆]有自動(dòng)初始化，我們按照代碼提示手動(dòng)初始化

cd myvue

npm run dev

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

總結(jié)

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

最新評(píng)論