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項目的創建的步驟(圖文教程)的文章就介紹到這瞭,更多相關vue項目創建內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!