Vue-cli 腳手架搭建vue2和vue3的全家桶項目詳細步驟


由於vue官方現在默認創建的版本是vue3,在創建配置選擇上有很大的改動,有些還不會vue3的開發者 想繼續使用vue2 創建就會遇到了一些問題。

現在對vue2 和vue3的全家桶進行項目的創建進行詳細的講解步驟。(只需要一直保持最新的 cli環境就可以了,不需要在去安裝指定的vue低版本,目前我使用的是@vue/cli 5.0.1)

注意:我們常用的 axios 沒有在cli配置里安裝  可以自己 npm i axios 去安裝后封裝使用

使用當前文章去搭建的Vue2和Vue3項目 推薦在這個文章去配置項目環境變量和反向代理 完全支持的vue2和vue3的:https://www.cnblogs.com/Allen-project/p/15434522.html

環境准備

注意:node 版本必須要在8以上

1.安裝node環境

https://nodejs.org/zh-cn/

2.安裝最新CLI 腳手架(全局安裝只安裝一次,后續創建新的項目不需要再執行)

npm install -g @vue/cl

 

Vue2(項目創建)


1.選擇准備工作的空文件夾cd到當前文件夾地址,執行下面的命令

vue create vue2

2.選擇項目配置

提示:回車=確定 空格=多選
 
1)不要代碼規范驗證,可以自己選擇
0
 
2)選擇當前項目安裝那些模塊,這里選擇了全家桶(上下按鈕選中后,空格打鈎,最后選擇完成回車)
 
0

 

3)選擇vue2
0

 

4)路由器模式?選擇N
 
0

 

5)選擇一個css預處理器

0

 

6)Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
 
0

 

7)是否吧前面的選擇的配置作為以后創建項目的默認配置 這里可以Y也可以N ,就是記住上面的配置以后不用在選擇了
根據這個配置 直接創建
0

 

8)創建成功:npm run serve 啟動vue2項目

0
0

 

Vue3(項目創建)


1.選擇准備工作的空文件夾cd到當前文件夾地址,執行下面的命令

vue create vuelic2

2.選擇項目配置

提示:回車=確定 空格=多選
 
1)不要代碼規范驗證模式
0
 
2)選擇vue3全家桶並且安裝TS(我一般開發vue3 都會使用到TS,不需要的可以不安裝)
0

 

3)選擇vue3
0

 

3)使用類樣式的組件語法?y
0

 

4) 使用Babel與TypeScript一起用於自動檢測的填充? yes
0

 

5)是不是用history模式來創建路由 N
0
 
6)選擇安裝css預處理器
0
 
7)選擇packge
0
 
8)是否吧以上配置做為默認配置,下次不要選擇直接讀取當前配置進行創建 N
0

 

9)創建成功 npm run serve 啟動項目
0

 

以上就是創建vue2 和vue3項目的步驟 ,vue項目工程的其他具體配置 可以看看我之前的文章有寫。

 

我是馬丁歡迎轉發和收藏

 


免責聲明!

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



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