栗栋梁

V1

2022/07/19阅读:17主题:橙心

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

摘要

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

前言

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

直到那个男人在2022年7月1日发布了代号为NarutoVue2.7。喜大普奔,咱们终于能在Vue2里面用上组合式apisetup了,还有完备的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.7releaseVue官方也提供了对应的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配置稍作改动也是可以用的,具体配置参考

组件自动导入

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

组合式Api自动导入

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

UnoCSS

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

纯CSS的图标(能力在IE11上部分支持)

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

因为所有的这些icons都是基于iconify这个图标框架的图标集icon-sets,其底层都是使用的svg来渲染,并且提供了这些svgURLicones.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

分类:

前端

标签:

Vue.js

作者介绍

栗栋梁
V1