新建vue3.0 項目—步驟詳細介紹


一、環境搭建

1、安裝node環境(版本≥ 8.9)

2、安裝vue-cli3.0

npm install @vue/cli -g

此處省略安裝步驟截圖了,相信各位都已裝好了,下圖為查看版本結果:

 

 二、建項目

1、vue create 搭建新項目

vue create <Project  Name> //文件名  不支持駝峰(含大寫字母)

 

我沒有卸載舊版本的 vue-cli(1.x 或 2.x),所以創建時也會出現vue2.0

 

 2、自定義配置,根據你需要用箭頭上下鍵選擇(按 “空格鍵”選擇/取消選擇,A鍵全選/取消全選,I鍵進行反選)對應功能

 

3、我沒有卸載舊版本的 vue-cli(1.x 或 2.x),所以創建時需要選擇2.0 還是 3.0

 

 4、是否用history模式來創建路由   —— 我選 Y

  Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由(通過調用瀏覽器提供的接口)

 最直觀的區別就是在url中 hash 帶了一個很丑的 #     而history是沒有#的

//index.js
const router = new VueRouter({
  mode: "history",
  routes
});

 

5、css預處理器(主要為css解決瀏覽器兼容、簡化CSS代碼 等問題) —— 我選 Less

 

6、ESLint:提供一個插件化的javascript代碼檢測工具,ESLint + Prettier 使用較多 —— 我選 ESLint + Prettier 

 

7、何時檢測  —— 我選  Lint on save

 

lint on save   //在保存時進行檢測

lint and fix on commit  //在fix和commit是進行檢查

 

8、單元測試  —— 我選  Jest

 

 

9、如何存放配置  —— 我選 In dedicated config files

 

10、是否保存本次配置(y:記錄本次配置,然后需要你起個名; n:不記錄本次配置)  ——我選N

 

11、配置完成,開始編譯

 

 

 12、編譯完成,開始運行

 

13、運行成功

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM