一、前言

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

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

二、搭建準(zhǔn)備

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

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

npm install -g @vue/cli 

三、搭建項(xiàng)目

1. 進(jìn)入想要存放Vue3項(xiàng)目的目錄，運(yùn)行 然后Y：

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

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

這邊我們選擇第三個(gè)自定義項(xiàng)目的配置

• 默認(rèn)安裝Vue3
• 默認(rèn)安裝Vue3
• 自定義安裝

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

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

4.選擇Vue版本

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

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

7.是否使用router的history模式

8.選擇css預(yù)處理語(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檢查時(shí)機(jī)

• 保存時(shí)檢查
• 提交時(shí)檢查

11.配置文件的選擇

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

13.搭建完成

四、啟動(dòng)項(xiàng)目

進(jìn)入到項(xiàng)目中 

cd ./vue3-project

運(yùn)行

npm run serve

總結(jié)

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

最新評(píng)論