摘要
the-last-naruto是一個(gè)基于Vue@2.7和Vite@3的一個(gè)項(xiàng)目模板(支持IE11瀏覽器)，靈感來源自antfu大佬的vitesse-lite。旨在給項(xiàng)目上還需要支持IE11瀏覽器的一些同學(xué)提供近似Vue3生態(tài)的開發(fā)體驗(yàn)。
前言
眾所周知，由于Vue3中的響應(yīng)式系統(tǒng)是基于proxy來構(gòu)建的，導(dǎo)致需要兼容IE和低版本瀏覽器的項(xiàng)目無法升級(jí)到Vue3。有些同學(xué)又想嘗試用新的組合式api來組織代碼，還需要借助于@vue/composition-api這個(gè)插件的力量，雖然也將就能用，但是ts不友好和缺少setup語法糖的境況還是令人沮喪??。
直到那個(gè)男人在2022年7月1日發(fā)布了代號(hào)為Naruto的Vue2.7。喜大普奔，咱們終于能在Vue2里面用上組合式api和setup了，還有完備的ts支持??。當(dāng)時(shí)仔細(xì)看了release blog，發(fā)現(xiàn)除了可以用Vue CLI / webpack起項(xiàng)目，竟然連Vite也支持了！激動(dòng)的??，顫抖的??，借助vite-plugin-vue2就可以用Vite支持我們開發(fā)vue2.7的項(xiàng)目了，鑒于之前用過antfu大佬vitesse-lite寫過項(xiàng)目，覺得非常好用，于是我就想能既然Vue2.7出來了，vite也支持了，能不能讓Vue2.7的項(xiàng)目的開發(fā)體驗(yàn)朝Vue3靠齊，畢竟天下苦webpack久矣，所以the-last-naruto就誕生了。
特性
完善的TypeScript和<script setup>語法糖
Vue2.7直接完美支持！
VueUse
開箱即用！
支持使用Vite開發(fā)和打包
伴隨Vue2.7的release，Vue官方也提供了對(duì)應(yīng)的Vite插件vite-plugin-vue2。給不能升級(jí)到Vue@3版本的開發(fā)者提供了大力的支持！具體配置參考。
配置打包產(chǎn)物支持IE11
Vite的默認(rèn)瀏覽器支持基線是原生ESM也就是es6-module，所以我們需要使用Vite官方提供的一個(gè)插件@vitejs/plugin-legacy來為打包后的文件提供傳統(tǒng)瀏覽器兼容性支持。具體配置參考。
文件路由
知道Nuxtjs的路由系統(tǒng)的應(yīng)該都了解這種路由系統(tǒng)的特點(diǎn)，不用手動(dòng)配置路由，基于文件夾層級(jí)和文件名自動(dòng)生成的路由系統(tǒng)，并且也支持動(dòng)態(tài)路由，非常方便。在vitesse-lite中我知道了這么一個(gè)插件vite-plugin-pages，雖說這個(gè)插件的文檔中說自己是支持Vue 3 / React應(yīng)用的文件路由系統(tǒng)，但是經(jīng)過我的嘗試，不出意外的vue@2.7配合vue-router@3.5.4配置稍作改動(dòng)也是可以用的，具體配置參考。
組件自動(dòng)導(dǎo)入
了解Vue3和Vite生態(tài)的應(yīng)該都知道antfu大佬的一個(gè)很有名也很好用的插件unplugin-vue-components，之前的開發(fā)中我們要使用封裝好的組件，都要引入組件，并在components中聲明，當(dāng)我們的項(xiàng)目越來越復(fù)雜，這種代碼會(huì)越來越多，導(dǎo)致代碼可讀性下降，我們使用unplugin-vue-components來優(yōu)化這個(gè)問題，使用組件直接在模板文件中使用即可，不需要導(dǎo)入不需要聲明，具體配置參考
組合式Api自動(dòng)導(dǎo)入
跟上面組件導(dǎo)入的痛點(diǎn)類似，之前我們在使用組合式api和VueUse中提供的方法來組織代碼邏輯的時(shí)候還是手動(dòng)引入類似ref、reactive、onMounted。我們可以使用unplugin-auto-import來優(yōu)化這個(gè)問題，別問，問就是還是antfu大佬的庫??，具體配置參考。
UnoCSS
用過tailwindcss、windicss或者用過vitesse-lite模板的都大概知道UnoCSS的能力怎樣，誰用誰知道！??我們借助Vite的能力，同樣的可以在Vue2.7的項(xiàng)目中使用強(qiáng)大的、高性能的、高靈活性的UnoCSS。給你個(gè)眼神自己體會(huì)，還是antfu大佬的庫??，具體配置參考。
純CSS的圖標(biāo)（能力在IE11上部分支持）
十分不好意思各位，由于antfu大佬的icons-in-pure-css方案中使用了IE11不支持的CSS能力：IE11中無法支持CSS Masks和CSS property: mask-image，所以這個(gè)能力在IE11上成為了遺憾。但是??，也有另一種不怎么優(yōu)雅的方案來提供有限的能力。
因?yàn)樗械倪@些icons都是基于iconify這個(gè)圖標(biāo)框架的圖標(biāo)集icon-sets，其底層都是使用的svg來渲染，并且提供了這些svg的URLicones.js.org，我們就能拿到想要使用的圖標(biāo)的URL或者Data URL，判斷當(dāng)前瀏覽器如果是IE，就用background-image的方案來使用圖標(biāo)，通過指定元素寬高也可以模擬實(shí)現(xiàn)，組件大概邏輯：
<div :class="isIE ? `w-${size} h-${size}` : ''" display-context inline-block text-center>
<div v-if="isIE" :class="`w-${size} h-${size}`" :style="{ backgroundImage: `url(${Icons[name]})`, backgroundSize: '100% 100%' }" />
<div v-else :class="`${IconName[name]} text-${size}`" inline-block />
</div>
具體代碼參考。
遺憾的一點(diǎn)就是圖標(biāo)顏色的設(shè)置還沒有一個(gè)比較好的方案，如果你有比較好的顏色改變方案，歡迎PR!
CSS Variables Polyfill
感謝ie11CustomProperties的支持，只在IE11瀏覽器環(huán)境上加載一段polyfill來支持css var。
使用
npx degit luvletterldl/the-last-naruto your-project-name
cd your-project-name
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
總結(jié)
長江后浪推前浪，前端圈里面更是如此。Vue團(tuán)隊(duì)在打磨了好了Vue3生態(tài)之后，并沒有選擇把Vue2"拍死在沙灘上"。依然對(duì)Vue2保持初心，為我們開發(fā)者精心準(zhǔn)備了Vue2.7這樣的傳奇版本。就像他的代號(hào)Naruto一樣。
只要有樹葉飛舞的地方就會(huì)有火在燃燒，火的影子照耀著村子，然后新的樹葉會(huì)再次萌芽
最后，也希望the-last-naruto能夠幫助到你，使用有任何問題也可以給我評(píng)論或者提issue，如果有好的建議也歡迎PR！有用請點(diǎn)贊（順便給個(gè)Star??），喜歡請關(guān)注，我是Senar。
