溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue項目如何創建

發布時間:2022-03-07 09:13:33 來源:億速云 閱讀:163 作者:小新 欄目:開發技術

這篇文章給大家分享的是有關vue項目如何創建的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

安裝npm

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

vue項目如何創建

安裝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、選擇第三項自定義添加:

vue項目如何創建

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

vue項目如何創建

  • Babel:js編譯器

  • Typescript:js的超集

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

  • Router:vue的路由

  • Vuex:vue的狀態管理

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

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

  • Unit Testing:單元測試

  • E2E Testing:端對端測試

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

vue項目如何創建

5、路由采用history模式,輸入y:

vue項目如何創建

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

vue項目如何創建

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

vue項目如何創建

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

vue項目如何創建

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

vue項目如何創建

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

vue項目如何創建

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

vue項目如何創建

啟動項目

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

vue項目如何創建

vue項目如何創建

感謝各位的閱讀!關于“vue項目如何創建”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女