共计 2721 个字符，预计需要花费 7 分钟才能阅读完成。
摘要
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。
