前言
上一篇博文已經(jīng)對Node.js的安裝與配置進行了詳細介紹，詳見https://blog.csdn.net/qq_42006801/article/details/124830995
另外：文中項目存放的路徑及項目名稱可根據(jù)自身實際情況進行更改。
一、Vue.js簡述
? ? ? ? Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用（SPA）提供驅(qū)動。
二、搭建Vue腳手架
1. 直接用 <script>標簽引入
直接下載并用<script>標簽引入，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ā)單文件組件。
2.1 安裝Vue腳手架
在Cmd命令行窗口中輸入如下命令安裝Vue腳手架。
npm install @vue/cli -g
或者
cnpm install @vue/cli -g
當(dāng)然前提是已安裝配置了npm或者cnpm，如未安裝可見博文：Node.js安裝與配置（詳細步驟）
執(zhí)行cnpm install @vue/cli -g后如下圖所示：
2.2 查看安裝的Vue版本
cmd命令行窗口輸入vue -V查看@vue/cli是否安裝成功
vue -V
如下圖所示，vue腳手架即安裝成功
三、安裝webpack及webpack-cli
1.安裝webpack
由于webpack5及以上的版本變動較大，所以如果是采用vue3創(chuàng)建vue項目，用webpack4的版本更能互相的兼容。此處安裝webpack@4.42.0版本，命令如下：
cnpm install webpack@4.42.0 -g
安裝成功后，cmd命令行窗口如下圖所示：
2.安裝webpack-cli
另外：由于webpack的版本需要webpack-cli一起配合使用，執(zhí)行如下命令安裝webpack-cli：
cnpm install webpack-cli -g
安裝成功后，cmd命令行窗口如下圖所示：
3.檢查是否安裝成功
cmd命令行窗口輸入如下命令：
webpack -v
如下圖所示，webpack和webpack-cli已經(jīng)安裝成功。
四、新建一個默認的Vue項目
1.創(chuàng)建項目
首先進入【E:\codes\web】路徑下（此處創(chuàng)建在E:\codes\web下，請根據(jù)自身實際情況更改），然后進入此文件夾的cmd命令行窗口。
執(zhí)行如下命令創(chuàng)建一個名為【hello-vue】的Vue項目：
vue create hello-vue
點擊回車后，會自動下載所需文件（包括node_modules），創(chuàng)建成功后如下圖所示：
2.啟動項目
首先進入【E:\codes\web\hello-vue】文件夾，然后進入此文件夾的cmd命令行窗口
執(zhí)行如下指令運行該項目：
npm run serve
如上圖項目啟動成功，在瀏覽器打開http://localhost:8080/進行訪問，效果如下圖所示：文章來源：http://www.zghlxwxcb.cn/news/detail-784521.html
寫在最后文章來源地址http://www.zghlxwxcb.cn/news/detail-784521.html
到了這里，關(guān)于Vue.js安裝與創(chuàng)建默認項目（詳細步驟）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
