一、前言

在2020年的9月19日，萬眾期待的Vue3終于發(fā)布了正式版，命名為“One Piece”。

它也帶來了很多新的特性：更好的性能、更小的包體積、更好的TypeScript集成、更優(yōu)秀的API設(shè)計。

二、搭建準(zhǔn)備

在開發(fā)前，你需要確定你的腳手架(vue-cli)的版本在3.x以上

如果版本不能達到要求，則重新安裝vue-cli

npm install -g @vue/cli 

三、搭建項目

1. 進入想要存放Vue3項目的目錄，運行 然后Y：

vue create vue3-project //可以將vue3-project換成任何你想取的項目名

2. 出現(xiàn)的三個選項：

這邊我們選擇第三個自定義項目的配置

• 默認安裝Vue3
• 默認安裝Vue3
• 自定義安裝

3.選擇項目開發(fā)需要用到的配置：

• Babel：js編譯器，可將代碼轉(zhuǎn)換為向后兼容
• TypeScript：簡稱ts，較js更為規(guī)范的編程語言
• Progressive Web App (PWA) Support：PWA是一個結(jié)合了最好的web和app經(jīng)驗的漸進式網(wǎng)絡(luò)應(yīng)用程序
• Router：vue路由
• Vuex：組件間傳值，詳情可看Vuex
• CSS Pre-processors:css預(yù)處理
• Linter / Formatter：代碼風(fēng)格化/格式化檢查
• Unit Testing：單元測試是指對軟件中的最小可測試單元進行檢查和驗證
• E2E Testing：E2E測試是一種功能測試。與單元測試不同，不會將應(yīng)用程序分解為更小的部分以進行測試 - 而是測試整個應(yīng)用程序。

4.選擇Vue版本

5.是否選擇class風(fēng)格組件

6.選擇ts處理工具和css預(yù)處理器

7.是否使用router的history模式

8.選擇css預(yù)處理語言

9.選擇lint的檢查規(guī)范

• 只使用EsLint官網(wǎng)推薦規(guī)范
• 使用EsLint官網(wǎng)推薦規(guī)范+Airbnb的規(guī)范
• 使用EsLint官網(wǎng)推薦規(guī)范+Standard的規(guī)范（通用規(guī)范）
• 使用EsLint官網(wǎng)推薦規(guī)范+Prettier的規(guī)范（比較漂亮的規(guī)范）

10.Eslint檢查時機

• 保存時檢查
• 提交時檢查

11.配置文件的選擇

12.配置是否形成預(yù)設(shè)

13.搭建完成

四、啟動項目

進入到項目中 

cd ./vue3-project

運行

npm run serve

總結(jié)

到此這篇關(guān)于Vue3項目搭建的文章就介紹到這了,更多相關(guān)Vue3項目搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！