The Last Naruto,兼容IE11的vue脚手架

封面

摘要

the-last-naruto是一个基于Vue@2.7和Vite@3的一个项目模板(支持IE11浏览器)，灵感来源自antfu大佬的vitesse-lite。旨在给项目上还需要支持IE11浏览器的一些同学提供近似Vue3生态的开发体验。

前言

众所周知，由于Vue3中的响应式系统是基于proxy来构建的，导致需要兼容IE和低版本浏览器的项目无法升级到Vue3。有些同学又想尝试用新的组合式api来组织代码，还需要借助于@vue/composition-api这个插件的力量，虽然也将就能用，但是ts不友好和缺少setup语法糖的境况还是令人沮丧😢。

直到那个男人在2022年7月1日发布了代号为Naruto的Vue2.7。喜大普奔，咱们终于能在Vue2里面用上组合式api和setup了，还有完备的ts支持💪。当时仔细看了release blog，发现除了可以用Vue CLI / webpack起项目，竟然连Vite也支持了！激动的💕，颤抖的🙌，借助vite-plugin-vue2就可以用Vite支持我们开发vue2.7的项目了，鉴于之前用过antfu大佬vitesse-lite写过项目，觉得非常好用，于是我就想能既然Vue2.7出来了，vite也支持了，能不能让Vue2.7的项目的开发体验朝Vue3靠齐，毕竟天下苦webpack久矣，所以the-last-naruto就诞生了。

特性

完善的TypeScript和<script setup>语法糖

Vue2.7直接完美支持！

VueUse

开箱即用！

支持使用Vite开发和打包

伴随Vue2.7的release，Vue官方也提供了对应的Vite插件vite-plugin-vue2。给不能升级到Vue@3版本的开发者提供了大力的支持！具体配置参考。

配置打包产物支持IE11

Vite的默认浏览器支持基线是原生ESM也就是es6-module，所以我们需要使用Vite官方提供的一个插件@vitejs/plugin-legacy来为打包后的文件提供传统浏览器兼容性支持。具体配置参考。

文件路由

知道Nuxtjs的路由系统的应该都了解这种路由系统的特点，不用手动配置路由，基于文件夹层级和文件名自动生成的路由系统，并且也支持动态路由，非常方便。在vitesse-lite中我知道了这么一个插件vite-plugin-pages，虽说这个插件的文档中说自己是支持Vue 3 / React应用的文件路由系统，但是经过我的尝试，不出意外的vue@2.7配合vue-router@3.5.4配置稍作改动也是可以用的，具体配置参考。

组件自动导入

了解Vue3和Vite生态的应该都知道antfu大佬的一个很有名也很好用的插件unplugin-vue-components，之前的开发中我们要使用封装好的组件，都要引入组件，并在components中声明，当我们的项目越来越复杂，这种代码会越来越多，导致代码可读性下降，我们使用unplugin-vue-components来优化这个问题，使用组件直接在模板文件中使用即可，不需要导入不需要声明，具体配置参考

组合式Api自动导入

跟上面组件导入的痛点类似，之前我们在使用组合式api和VueUse中提供的方法来组织代码逻辑的时候还是手动引入类似ref、reactive、onMounted。我们可以使用unplugin-auto-import来优化这个问题，别问，问就是还是antfu大佬的库😂，具体配置参考。

UnoCSS

用过tailwindcss、windicss或者用过vitesse-lite模板的都大概知道UnoCSS的能力怎样，谁用谁知道！🤔我们借助Vite的能力，同样的可以在Vue2.7的项目中使用强大的、高性能的、高灵活性的UnoCSS。给你个眼神自己体会，还是antfu大佬的库😜，具体配置参考。

纯CSS的图标（能力在IE11上部分支持）

十分不好意思各位，由于antfu大佬的icons-in-pure-css方案中使用了IE11不支持的CSS能力：IE11中无法支持CSS Masks和CSS property: mask-image，所以这个能力在IE11上成为了遗憾。但是👀，也有另一种不怎么优雅的方案来提供有限的能力。

因为所有的这些icons都是基于iconify这个图标框架的图标集icon-sets，其底层都是使用的svg来渲染，并且提供了这些svg的URLicones.js.org，我们就能拿到想要使用的图标的URL或者Data URL，判断当前浏览器如果是IE，就用background-image的方案来使用图标，通过指定元素宽高也可以模拟实现，组件大概逻辑：

<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>

具体代码参考。
遗憾的一点就是图标颜色的设置还没有一个比较好的方案，如果你有比较好的颜色改变方案，欢迎PR!

CSS Variables Polyfill

感谢ie11CustomProperties的支持，只在IE11浏览器环境上加载一段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

总结

长江后浪推前浪，前端圈里面更是如此。Vue团队在打磨了好了Vue3生态之后，并没有选择把Vue2"拍死在沙滩上"。依然对Vue2保持初心，为我们开发者精心准备了Vue2.7这样的传奇版本。就像他的代号Naruto一样。

只要有树叶飞舞的地方就会有火在燃烧，火的影子照耀着村子，然后新的树叶会再次萌芽

最后，也希望the-last-naruto能够帮助到你，使用有任何问题也可以给我评论或者提issue，如果有好的建议也欢迎PR！有用请点赞（顺便给个Star😜），喜欢请关注，我是Senar。