vue項目創建實例分析

今天小編給大家分享一下vue項目創建實例分析的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

安裝npm

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

安裝vue腳手架

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

創建vue項目

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

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

• Babel：js編譯器

• Typescript：js的超集

• Progressive Web App Support:漸進式的網頁應用程序

• Router:vue的路由

• Vuex:vue的狀態管理

• CSS Pre-processors:css的預處理器

• Linter/Formatter:代碼風格檢測與格式化(如果自己代碼不是很規范的話可以用這個約束下自己,也可不選擇，按照自己的風格)

• Unit Testing:單元測試

• E2E Testing:端對端測試

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

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

6、選擇第一項CSS預處理器：

7、選擇第三個標準配置：

8、選擇第一個，編寫代碼時提示錯誤：

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

10、保存設置為demo,下次再次創建項目時便會多出一個demo選項，不需再次配置即可直接使用：

11、敲擊回車等待后創建完成：

啟動項目

1、cd到項目目錄下：cd test。輸入啟動命令：npm run serve
2、打開鏈接即可啟動項目：

以上就是“vue項目創建實例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。