摘要

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-namecd your-project-namepnpm 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。