安裝npm

1、檢查node，未安裝在這里下載最新版安裝。
2、檢查npm，node自帶npm但不是最新版本，需要命令更新：npm install -g npm

安裝vue腳手架

1、在國內(nèi)下載時(shí)網(wǎng)絡(luò)會(huì)出問題,建議淘寶鏡像下載，配置鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org
2、用cnpm安裝vue腳手架：cnpm i -g @vue/cli（其中i是Install安裝的簡寫，g是global全局的簡寫）。

創(chuàng)建vue項(xiàng)目

1、使用腳手架創(chuàng)建vue項(xiàng)目:vue create test(test為項(xiàng)目名)
2、選擇第三項(xiàng)自定義添加：

Default([Vue 3] babel, eslint):vue3的項(xiàng)目，只包含js編譯器babel，代碼檢測工具eslint。
Default([Vue 2] babel, eslint):vue2的項(xiàng)目，只包含js編譯器babel，代碼檢測工具eslint。
Manually select features:自定義添加選擇功能。
3、選擇配置,一般項(xiàng)目勾選下圖選項(xiàng)即可：

• Babel：js編譯器
• Typescript：js的超集
• Progressive Web App Support:漸進(jìn)式的網(wǎng)頁應(yīng)用程序
• Router:vue的路由
• Vuex:vue的狀態(tài)管理
• CSS Pre-processors:css的預(yù)處理器
• Linter/Formatter:代碼風(fēng)格檢測與格式化(如果自己代碼不是很規(guī)范的話可以用這個(gè)約束下自己,也可不選擇，按照自己的風(fēng)格)
• Unit Testing:單元測試
• E2E Testing:端對端測試

4、選擇vue3(按照自己需求來)

5、路由采用history模式，輸入y：

6、選擇第一項(xiàng)CSS預(yù)處理器：

7、選擇第三個(gè)標(biāo)準(zhǔn)配置：

8、選擇第一個(gè)，編寫代碼時(shí)提示錯(cuò)誤：

9、Babel、ESLint 等的配置存放選擇都存放在package.json中，選擇第二項(xiàng)：

10、保存設(shè)置為demo,下次再次創(chuàng)建項(xiàng)目時(shí)便會(huì)多出一個(gè)demo選項(xiàng)，不需再次配置即可直接使用：

11、敲擊回車等待后創(chuàng)建完成：

啟動(dòng)項(xiàng)目

1、cd到項(xiàng)目目錄下：cd test。輸入啟動(dòng)命令：npm run serve
2、打開鏈接即可啟動(dòng)項(xiàng)目：

 到此這篇關(guān)于vue項(xiàng)目的創(chuàng)建的步驟(圖文教程)的文章就介紹到這了,更多相關(guān)vue項(xiàng)目創(chuàng)建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論