Vue?web前端三大主流框架之一,是一套用于構建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關于Vue安裝與配置教程的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
?
目錄
- 一、下載和安裝Vue
- 二、創(chuàng)建全局安裝目錄和緩存日志目錄
-
三、配置環(huán)境變量
- ?1. 環(huán)境變量---用戶變量---選中Path---點編輯
- 2. 環(huán)境變量---系統(tǒng)變量---新建
-
?三、安裝vue
- 1. 安裝vue.js
- 2. 安裝webpack模板
- 3. 安裝腳手架vue-cli
- 4. 安裝vue-router
- 四、我的第一個的?vue-cli應用程序
- 總結
一、下載和安裝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)境變量，右側(cè)有說明。我們直接點next
這里不用勾選，直接點next
install
?finish
安裝完成后，檢查一下是否安裝成功。
打開cmd，輸入如下指令。?
| 1 |
|
| 1 |
|
輸出了版本號就說明安裝成功了。
安裝后的完整目錄：
二、創(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淘寶鏡像加速器，這里配置了就不需要安裝了）
| 1 |
|
查看npm配置修改是否成功
| 1 |
|
同時我們會發(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
| 1 |
|
其中-g是全局安裝，指安裝到global全局目錄去，如果不加-g，模塊就會安裝到當前路徑下的node_modules文件夾下，沒有目錄則自動創(chuàng)建。
如果出現(xiàn)了這個問題，是因為當前用戶沒有這個權限。
網(wǎng)上有些方法是刪除C:\Users\用戶名\下的.npmrc文件，萬萬不可這樣，因為那個文件刪除了，我們前面修改的全局模塊目錄和緩存目錄配置就沒了?。?！到時候vue包就下載到C:\Users\你的用戶名\AppData\Roaming\npm去了，也就是默認的地方去了，那我們前面修改就沒意義了。
正確的打開方式是，用管理員身份運行唄！
Win + s 搜索 “命令提示符”，右鍵以管理員身份運行。
| 1 |
|
2. 安裝webpack模板
| 1 |
|
此外，在webpack 4x以上，webpack將命令相關的內(nèi)容都放到了webpack-cli，所以還需要安裝webpack-cli
| 1 |
|
輸入 webpack -v，能輸出版本號就說明都安裝好了。
3. 安裝腳手架vue-cli
| 1 |
|
輸入vue --version，能輸出版本號就說明安裝好了。
4. 安裝vue-router
| 1 |
|
都弄好了我們打開我們自定義的全局模塊目錄下的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應用程序
| 1 |
|
根據(jù)自己的需求來操作。
- 項目名是？回車
- 項目描述？回車
- 作者？回車
- 是否安裝編譯器 回車
- 是否安裝vue-router y 回車
- 是否使用ESLint做代碼檢查 n 回車
- 是否安裝單元測試工具 n 回車
- 單元測試相關 n 回車
- 創(chuàng)建完成后直接初始化 n 回車
因為沒有自動初始化，我們按照代碼提示手動初始化
| 1 |
|
| 1 |
|
?訪問網(wǎng)址：成功！文章來源：http://www.zghlxwxcb.cn/news/detail-841820.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-841820.html
到了這里，關于超級詳細的Vue安裝與配置教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
