最近公司要開(kāi)新項(xiàng)目，由于vue2已經(jīng)停止技術(shù)更新，所以我打算使用vue3來(lái)作為此次項(xiàng)目的前端框架。
創(chuàng)建項(xiàng)目前我們要知道，官方是推薦通過(guò)vite與Ts來(lái)構(gòu)建的，但是并不是說(shuō)以前通過(guò)vue-cil和js的方法不行。vue3的寫(xiě)法也是支持vue2的寫(xiě)法的，只是官方并不推薦這么寫(xiě)罷了。
那我們直接來(lái)創(chuàng)建項(xiàng)目，第一種方法通過(guò)vue-cil和js，也就是我們創(chuàng)建vue2的老方法。
下載vue-cil：vue install -g @vue/cil 創(chuàng)建一個(gè)腳手架：vue create name 運(yùn)行腳手架：npm run serve
想必用過(guò)vue2的老程序員都知道，vue2在項(xiàng)目啟動(dòng)時(shí)會(huì)通過(guò)路由預(yù)先把所有文件進(jìn)行一遍編譯，所以當(dāng)vue2項(xiàng)目啟動(dòng)時(shí)，根據(jù)項(xiàng)目的不同大小啟動(dòng)時(shí)間在10秒-5分鐘不等，項(xiàng)目越大啟動(dòng)越慢，所以vue3的官方也更推薦使用vite。
vite是vue團(tuán)隊(duì)推出的構(gòu)建工具，等價(jià)于webpack，不僅能直接支持Ts，而且在啟動(dòng)項(xiàng)目速度上相比于vue-cil有一個(gè)及其巨大的提升。為什么呢，cil項(xiàng)目在啟動(dòng)時(shí)編譯的所有的文件，編譯完成后才會(huì)彈出頁(yè)面網(wǎng)址，而vite構(gòu)建的vue會(huì)首先彈出頁(yè)面網(wǎng)址，在用戶查看目標(biāo)頁(yè)面時(shí)才會(huì)進(jìn)行編譯，做到了按需加載。
我們創(chuàng)建時(shí)只需要 npm create vue@latest就可以，以下是官網(wǎng)的介紹。
從上到下依次為：
項(xiàng)目名稱，是否支持ts，是否支持jsx，是否添加路由，是否支持pinia，是否添加單元測(cè)試，是否添加端到測(cè)試，是否添加ESLint，是否要求代碼格式化。
vite不僅啟動(dòng)快，而且創(chuàng)建速度也是非?？斓?，大家可以直接來(lái)創(chuàng)建和啟動(dòng)一個(gè)vue3工程來(lái)親自感受一下！
了解更多vue3的知識(shí)可以點(diǎn)擊這里。
