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
和
语法糖Vue2.7
直接完美支持!
开箱即用!
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和VueUse
中提供的方法来组织代码逻辑的时候还是手动引入类似ref
、reactive
、onMounted
。我们可以使用unplugin-auto-import来优化这个问题,别问,问就是还是antfu
大佬的库😂,具体配置参考。
用过tailwindcss
、windicss
或者用过vitesse-lite
模板的都大概知道UnoCSS
的能力怎样,谁用谁知道!🤔我们借助Vite
的能力,同样的可以在Vue2.7
的项目中使用强大的、高性能的、高灵活性的UnoCSS
。给你个眼神自己体会,还是antfu
大佬的库😜,具体配置参考。
十分不好意思各位,由于antfu
大佬的icons-in-pure-css方案中使用了IE11
不支持的CSS
能力:IE11
中无法支持CSS Masks和CSS property: mask-image,所以这个能力在IE11
上成为了遗憾。但是👀,也有另一种不怎么优雅的方案来提供有限的能力。
因为所有的这些icons
都是基于iconify这个图标框架的图标集icon-sets,其底层都是使用的svg
来渲染,并且提供了这些svg
的URL
icones.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
!
感谢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
。