上篇請移步到Vue下載安裝步驟的詳細(xì)教程(親測有效) 1_水w的博客-CSDN博客
上一篇博文已經(jīng)對Node.js的安裝與配置進(jìn)行了詳細(xì)介紹。
另外：文中項(xiàng)目存放的路徑及項(xiàng)目名稱可根據(jù)自身實(shí)際情況進(jìn)行更改。
目錄
三、Vue安裝配置
1、搭建Vue腳手架
2、通過NPM安裝Vue
（1）安裝Vue腳手架
（2）查看安裝的Vue版本
3、安裝webpack及webpack-cli
（1）安裝webpack
（2）安裝webpack-cli
解決問題：webpack -v不顯示版本號問題
四、新建一個默認(rèn)的Vue項(xiàng)目
1、創(chuàng)建項(xiàng)目
2、啟動項(xiàng)目
三、Vue安裝配置
Vue：是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用（SPA）提供驅(qū)動。
1、搭建Vue腳手架
直接下載并用<script>標(biāo)簽引入，Vue 會被注冊為一個全局變量。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、通過NPM安裝Vue
在用 Vue 構(gòu)建大型應(yīng)用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發(fā)單文件組件。
（1）安裝Vue腳手架
前提是已安裝配置了npm或者cnpm，然后在Cmd命令行窗口中輸入如下命令安裝Vue腳手架，
npm install @vue/cli -g
或者
cnpm install @vue/cli -g執(zhí)行cnpm install @vue/cli -g后，如下圖所示，
似乎沒有成功，不知道為什么。
重新試試，執(zhí)行npm install @vue/cli -g后，如下圖所示，
（2）查看安裝的Vue版本
cmd命令行窗口輸入vue -V查看@vue/cli是否安裝成功，
vue -V
?
3、安裝webpack及webpack-cli
（1）安裝webpack
由于webpack5及以上的版本變動較大，所以如果是采用vue3創(chuàng)建vue項(xiàng)目，用webpack4的版本更能互相的兼容。此處安裝webpack@4.42.0版本，命令如下：
cnpm install webpack@4.42.0 -g
或者
npm install webpack@4.42.0 -g使用cnpm install webpack@4.42.0 -g安裝成功后，cmd命令行窗口如下圖所示：?
使用npm install webpack@4.42.0 -g安裝成功后，cmd命令行窗口如下圖所示：
安裝成功后，可以在文件夾路徑下找到該模塊，?
?
（2）安裝webpack-cli
另外：由于webpack的版本需要webpack-cli一起配合使用，執(zhí)行如下命令安裝webpack-cli：
cnpm install webpack-cli -g
或者
npm install webpack-cli -g使用cnpm install webpack-cli -g，cmd命令行窗口執(zhí)行結(jié)果，如下所示，
使用npm install webpack-cli -g，cmd命令行窗口執(zhí)行結(jié)果，如下圖所示，
?
?安裝成功后，可以在文件夾路徑下找到該模塊，
?
（3）檢查是否安裝成功
cmd命令行窗口輸入如下命令：
webpack -v
解決問題：webpack -v不顯示版本號問題
原因：webpack 安裝后，但是查詢不到對應(yīng)版本號而輸出如上信息，顯示如下奇怪的內(nèi)容，說明還是沒能成功安裝。
嘗試（沒成功）：
（1）試了這種方法，但是沒有成功。
npm install webpack@4.42.0 -g #@后面加上需要安裝的版本號再次查詢便能成功查詢到 webpack 的版本號了。
（2）運(yùn)行命令npm list --depth=0 -g 檢測下webpack、webpack-cli等版本兼容情況，
webpack是全局安裝了的，cmd輸入這個命令可以查看版本號，
npm list --depth=0 -g
此時，檢測無報(bào)錯，說明webpack、webpack-cli版本已匹配。
（3）運(yùn)行npm init -y，在項(xiàng)目的根目錄創(chuàng)建一個
package.json文件,# 從當(dāng)前目錄中提取的信息生成默認(rèn)的package.json npm init -y # 或 npm init --yes
出現(xiàn)一串文本表示執(zhí)行成功。
?目前為止，沒找到解決辦法。。。。
四、新建一個默認(rèn)的Vue項(xiàng)目
1、創(chuàng)建項(xiàng)目
（1）首先進(jìn)入【D:\my\vue-code】路徑下（此處創(chuàng)建在D:\my\vue-code下，請根據(jù)自身實(shí)際情況更改），然后進(jìn)入此文件夾的cmd命令行窗口,
執(zhí)行如下命令創(chuàng)建一個名為【hello-vue】的Vue項(xiàng)目：
點(diǎn)擊回車后，會自動下載所需文件（包括node_modules），創(chuàng)建成功后，如下圖所示，
2、啟動項(xiàng)目
（1）首先進(jìn)入【D:\my\vue-code\hello-vue】文件夾，然后進(jìn)入此文件夾的cmd命令行窗口，執(zhí)行如下指令運(yùn)行該項(xiàng)目：
npm run serve
（2）復(fù)制任意一個路徑，用瀏覽器打開，
App running at:
- Local: http://localhost:8080/
- Network: http://172.30.115.152:8080/在瀏覽器打開http://localhost:8080/進(jìn)行訪問，效果如下圖所示：?
文章來源：http://www.zghlxwxcb.cn/news/detail-788337.html
如上圖，說明項(xiàng)目啟動成功了。文章來源地址http://www.zghlxwxcb.cn/news/detail-788337.html
到了這里，關(guān)于Vue下載安裝步驟的詳細(xì)教程(親測有效) 2 安裝與創(chuàng)建默認(rèn)項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
