1.什么是Vue腳手架

????????Vue腳手架是Vue官方提供的標(biāo)準化開發(fā)工具（開發(fā)平臺），它提供命令行和UI界面，方便創(chuàng)建vue工程、配置第三方依賴、編譯vue工程。

? ? ? ? 特別注意：Vue腳手架是用來方便開發(fā)的，但vue腳手架不是最終發(fā)布到生產(chǎn)環(huán)境的產(chǎn)品。很多人會誤認為生產(chǎn)環(huán)境也要安裝vue腳手架。

2.vue腳手架執(zhí)行步驟

????????建議以管理員角色打開cmd界面，開始->Windows系統(tǒng)->命令提示符->更多->以管理員身份運行。如果當(dāng)前用戶是管理員用戶，直接使用組合快捷鍵Windows+R打開cmd界面

?1、先查看是否安裝了vue，執(zhí)行命令

vue -V

?如果提示：'Vue' 不是內(nèi)部或外部命令，也不是可運行的程序或批處理文件。先排查自己的電腦有沒有安裝npm環(huán)境。

npm -V

如果顯示版本號，說明安裝了npm。

使用安裝命令

npm install -g @vue/cli

?安裝完成再使用Vue -V可以看到Vue的版本

?2、切換到指定目錄，用命令創(chuàng)建項目

? ? ? ? 建議將開發(fā)的項目可以放到同一個文件夾下建立分文件夾，方便維護查找。比如我將開發(fā)的vue項目統(tǒng)一放到我的F盤下的vueProject文件夾下。使用cmd命令先切換到F://vueProject下再使用創(chuàng)建項目命令。

F:

cd vueProject

vue create vuetest

注意事項：

使用vue create 后面的項目名，名字不要大寫，比如我如果使用vueTest會提示：

Invalid project name:”vueTest”

Warning: name can no longer contain capital letters

3、執(zhí)行完創(chuàng)建vue create 項目名的命令，會提示：

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
? Default ([Vue 2] babel, eslint)
? Manually select features

提示你來選擇2/3版本進行開發(fā)，通過上下鍵來切換選擇2或者3

?

?注意：

（1）如果報錯：?ERROR command failed: npm install --loglevel error --legacy-peer-deps

解決方法修改C盤用戶文件夾下的 .vuerc文件。 將?“useTaobaoRegistry”: false, 值改為true。

?修改之后創(chuàng)建成功，我們看一下創(chuàng)建之后的目錄結(jié)構(gòu)：

?4、啟動項目【上一步最后有提示命令】

?cd vuetest
?npm run serve

5、訪問項目?

瀏覽器中輸入訪問地址：http://localhost:8080/

文章來源地址http://www.zghlxwxcb.cn/news/detail-402833.html

?3.模板項目結(jié)構(gòu)（各文件夾）

• 1.node_modules ?//npm install
• 2. public
• （1）favicon.ico: 頁簽圖標(biāo)
• （2）index.html: 主頁面
• 3.src
• （1）assets: 存放靜態(tài)資源
• （2）component: 存放組件
• 4.App.vue: 匯總所有組件
• 5.main.js: 入口文件
• 6.gitignore: git 版本管制忽略的配置
• 7. babel.config.js: babel 的配置文件
• 8.package.json: 應(yīng)用包配置文件
• 9. README.md: 應(yīng)用描述文件
• 10. package-lock.json：包版本控制文件

到了這里，關(guān)于Vue開發(fā)項目入門——Vue腳手架的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！