The Last Naruto, a vue scaffolding compatible with IE11

Summary

the-last-naruto is a project template based on Vue@2.7 and Vite@3 (support IE11 browser), inspired by antfu big guy's vitesse-lite . The purpose is to provide some students who need to support the project IE11 with a similar Vue3 ecological development experience.

foreword

As we all know, because the responsive system in Vue3 proxy is built based on ---bad551ca0fec405f1f6acf46fbd95e7e---, projects that need to be compatible with IE and lower version browsers cannot be upgraded Vue3 . Some students want to try to use the new composite api to organize the code, but also need to use the power of the @vue/composition-api plugin, although it will be available, but setup ts unfriendly and lack- setup The situation with syntactic sugar is still frustrating 😢.

Until that man released ---0322f267cce791d087efc2acf2cd8493--- codenamed Naruto Vue2.7 July 1, 2022 . Hi Da Vue2 , we can finally use the combined api and setup in ---6884f383adaf26612f29019d9fcbd797---, and there is also complete ts support💪. At that time, I carefully read the release blog and found that in addition to the Vue CLI / webpack starting project, even Vite is also supported! Excited💕, trembling🙌, you can use it with vite-plugin-vue2 Vite support us to develop the project of vue2.7 , considering that it has been used before antfu Guy vitesse-lite I wrote a project and found it very useful, so I thought that since Vue2.7 came out, vite also supported, can I let Vue2.7 The development experience of the project of Vue2.7 Vue3 , after all, the world webpack for a long time, so the-last-naruto was born.

characteristic

Perfect TypeScript and <script setup> syntactic sugar

Vue2.7 Direct perfect support!

VueUse

Out of the box!

Support use Vite development and packaging

Accompanying Vue2.7 release , Vue officially also provides the corresponding Vite -due-due-plug- ite- plug. Great support for developers who cannot upgrade to the Vue@3 version! Specific configuration reference .

Configure packaged product support IE11

Vite The default browser support baseline is 原生ESM that is es6-module , so we need to use Vite a plugin provided by the official @vitejs/plugin-legacy Provides legacy browser compatibility support for packaged files. Specific configuration reference .

file routing

Anyone who knows the routing system of Nuxtjs should understand the characteristics of this routing system. There is no need to manually configure routing. The routing system is automatically generated based on folder hierarchy and file name, and it also supports dynamic routing, which is very convenient. In vitesse-lite I know such a plug-in vite-plugin-pages , although the document of this plug-in says that it supports the file routing system of Vue 3 / React application, but after my attempts, Unsurprisingly vue@2.7 with vue-router@3.5.4 the configuration can also be used with slight changes, please refer to the specific configuration.

Components are automatically imported

Understand Vue3 and Vite ecological should all know antfu a well-known and useful plug-in unplugin-vue-components of the big guy, in the previous development If we want to use packaged components, we must introduce components and declare in components that when our project becomes more and more complex, there will be more and more such codes, which will reduce the readability of the code. We use unplugin-vue-components to optimize this problem. You can use the component directly in the template file, no need to import and no declaration, specific configuration reference

Combined API automatic import

Similar to the pain point of importing components above, we used the combined api and the methods provided in VueUse reactive ref code logic manually. reactive , onMounted . We can use unplugin-auto-import to optimize this problem, don't ask, it's still antfu the library of the big guy, please refer to the specific configuration.

UnoCSS

Used tailwindcss , windicss or used vitesse-lite template, who knows about UnoCSS ! 🤔With the ability of Vite , we can also use the powerful, high-performance and highly flexible Vue2.7 in the project of UnoCSS . Give you a look and experience it yourself, or antfu the big guy's library😜, please refer to the specific configuration.

Pure CSS icons (capability partially supported on IE11)

十分不好意思各位， antfu大佬的icons-in-pure-css IE11不支持的CSS能力： IE11 can't support CSS Masks and CSS property: mask-image , so this ability became a pity on IE11 . But 👀, there is another less elegant solution to provide limited capabilities.

Because all of these icons are based on the icon-sets of the iconify icon framework, and the bottom layer uses svg to render, and provides these svg URL icones.js.org , we can get the icon we want to use URL or Data URL , and judge if the current browser IE , just use the background-image scheme to use the icon, which can also be simulated by specifying the width and height of the element. The approximate logic of the components:

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

Specific code reference .
It is a pity that there is no better solution for the icon color setting . If you have a better color change solution, welcome PR !

CSS Variables Polyfill

Thanks for the support of ie11CustomProperties , only load a section polyfill in the IE11 browser environment to support css var .

use

 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

Summarize

The back waves of the Yangtze River push the front waves, especially in the front-end circle. Vue After polishing the Vue3 ecology, the team did not choose to put Vue2 "on the beach". Still right Vue2 maintain the original intention and carefully prepared for our developers Vue2.7 such a legendary version. Just like his codename Naruto .

Wherever there are leaves flying there will be fire burning, the shadow of the fire will shine on the village, and then new leaves will sprout again

Finally, I also hope that the-last-naruto can help you. If you have any questions, you can leave me a comment or issue an issue. If you have any good suggestions, you are welcome PR ! Please like it if it is useful (by the way Star ), if you like it, please pay attention, I am Senar .