introduce
Previously, I used some component libraries in VUE3 +vite, and supported ANTDV and other component libraries (ANTD supports vite-plugin-Components record). Most students are using VUE2 ecology. In order to facilitate vuE2 ecology to better migrate to Vite2, I made some efforts on Vite2 + VUE2 this week. Will bring me enlightenment element-UI and iView (View-Design) support vite-plugin-Components automatic on-demand loading, contribute to the open source community a little bit of their own modest strength, by the way, step on the pit ~~
Vite2 + VUE2 is used to build basic projects
Preparing dependency Packages
Vite rely on
"vite-plugin-vue2": "^ 1.7.2." ".Copy the code
Vue rely on
"@vue/compiler-sfc": "^ 3.1.4." "."vue": "2.6.11"."vue-template-compiler": "2.6.11".Copy the code
Configuration vite. Config. Js
import { createVuePlugin } from 'vite-plugin-vue2';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
createVuePlugin()
]
})
Copy the code
With that simple configuration done, you’re ready to play
Support Element – the UI
The reason
This is my work before the use of the most components library, although now not maintenance, but still young and strong, he has a unique feelings, even if hang also want to let him hang decent ~
Hit the pit
Basically do not have what big pit, have to praise the author’s excellent design! Note that you need to introduce base.css, otherwise the ind-number component button will not be available, and the component library will be more regular. You only need to convert the component name to kababCase. For example, menu-item and menu are defined as two packages, which are also divided into two files under the lib package after packaging. Menu and menu-item.js can be loaded on demand without paying attention to their inclusion relationship, and the corresponding component file can be directly imported
return {
path: `element-ui/lib/${partialName}`.sideEffects: getSideEffects(partialName, options),
}
Copy the code
All styles are put under theme-Chalk, and corresponding component styles and base styles are introduced as follows:
if (importStyle === 'sass') {
return [
'element-ui/packages/theme-chalk/src/base.scss'.`element-ui/packages/theme-chalk/src/${partialName}.scss`]},else if (importStyle === 'css') {
return [
'element-ui/lib/theme-chalk/base.css'.`element-ui/lib/theme-chalk/${partialName}.css`]},Copy the code
Note: antfu bosses suggested merging configuration parameters, because before are defined respectively, importStyle, importCss, importSass three parameters, didn’t really feel too big necessary, use a parameter importStyle different values can completely satisfy the three states switch, so easier to use.
PR:element-ui support
Support view-UI (iView)
The reason
This is my contact vue2 started the enlightenment of component library, at the time of the render function is through the component library society, feeling his body with the blood of some antd, although it only took a week, but it does seem to be more delicate, but due to the later work or seek stability, don’t choose it, update frequency is a bit slow. But now after the author full-time maintenance update a little faster, but also changed the name, feel not as good as iView to remember. Support for this component library is also because there is a unique feeling ~
Hit the pit
There are more pits here
1. An error is reported when introducing components such as Select that depend on popoverrequire is not defined
Select * from dropdown where popoverJS is imported via require commonJS syntax:
const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js'); // eslint-disable-line
Copy the code
Vite does not support importing coomonjs syntax by default, so I found a plugin that supports importing Coomonjs, @originjs/vite-plugin-commonjs, @originjs/vite-plugin-commonjs. As follows:
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
export default defineConfig({
plugins: [
viteCommonjs({}),
]
})
Copy the code
At this point, the problem is solved.
2. The introduction ofviteCommonjs
After quotevue.runtime.esm.js:619 [Vue warn]: Error in nextTick: "TypeError: Popper is not a constructor"
If you want to query the popover issue, you need to import it in the main function. I think this adds a lot of burden to the user, so I just introduced the sideEffects library to solve this problem.
3. Table dependent'element-resize-detector'
, date-picker component dependencyjs-calendar
It also needs to be introduced in the form of side effects
Because these two dependent libraries also use commonJS module.export, es6 imports are not imported
Wiki: Modular use of CommonJS and ES6
4. Select Drop down If option is passed through slot, the following error is reported
vue.runtime.esm.js:619 [Vue warn]: Error in getter for watcher "dropVisible": "TypeError: Cannot read property 'match' of undefined"
Copy the code
Solution: By looking at the source code, there is a match in selectoption
oroptionGroup
The re of is usedopts.tag.match
The way to judge, at this time iftag
forundefined
Errors will be reportedThe functions of tag are described below:
Select the source code
The changes are as follows:
if (opts && optionRegexp.test(opts.tag)) return [node];
Copy the code
After testing does not affect the original function, compatible with undefined.
The view – UI PR: github.com/view-design…
5. When selected from the view-UI drop-down list box, the value is not displayed (not solved yet)
Solution: after clicking on the log in the source code, it is found that when the option is clicked, it triggers two times. The first normal call passes the selected option, and the second value becomes undefined
6. The Scroll component cannot be parsed normally.vue uses lang html for template, however it is not installed.
(Not yet solved, unclear design purpose, can be solved manually)
Solution: The obvious problem is that Vite cannot parse the template syntax,
view-ui uses the WebPack-related Loader (HTml-loader) to parse the webPack-related scroll/ loading-Component. However, vite does not have a similar loader, so it cannot be parsed. I tried to remove the lang= “HTML” and found that it is normal. I don’t know why it is designed like this, but this component has normal Vue syntax inside, nothing special.
7. Sub-components (list-item,list-item-meta) in the list directory need special treatment, otherwise it will not be found
So far the component library migration, the vast majority of no problem, the official website document demo are run again
Core code:
export const ViewUiResolver = (): ComponentResolver= > (name: string) = > {
if (name.match(/^I[A-Z]/)) {
const compName = name.slice(1)
return {
path: `view-design/src/components/${getCompDir(compName)}`.sideEffects: getSideEffects(compName),
}
}
}
Copy the code
const getSideEffects: (
compName: string.) = > string[] = (compName) = > {
const sideEffects = [
'view-design/dist/styles/iview.css'.'popper.js/dist/umd/popper.js',]if (/^Table/.test(compName))
sideEffects.push('element-resize-detector')
if (/^Date/.test(compName))
sideEffects.push('js-calendar')
return sideEffects
}
Copy the code
PR:view-ui support
Migrating Vuesax (Alpha version)
The reason
The component library is now upgraded from version 3 to 4, but it still only supports VUE2, the effects are gorgeous, the components are not many, the purpose of it is to make it look good, no other reason, haha, but it is a hard journey.
Hit the pit
On-demand loading can load the source code or directly load the dist directory
1. Loading source code needs to be installed in the projectvue-class-component,vue-property-decorator,sass
Otherwise, an error is reported
Since the source code is written in TS decorators, as was the case in the VUE2 era, install the dependencies above to parse the corresponding class and decorator syntax, which looks pretty bad and is a lot of code
2. Match the component directory
- Source code: If the source code is imported, it needs to match to the real component directory, such as
VsSidebarGroup
The true catalog isvsSidebar/Group
The source code does not create a separate package for the child components - Compiled code: However, there is no need to match if the compiled files are introduced, and a separate dist directory is created after compilation
VsSidebarGroup
There’s a list ofindex.js
andstyle.css
, the first letter of the component directory is lowercase, and the conversion is correct.
Introduced 3.layout
Child componentsrow,col
Path problem of
- Source:
layout
The next component is placed withcomponents
The same level directory, so the time to match the need to the upper level search, can be normally introduced - Compile code:
dist
The catalog is not typedlayout
The bag that led to these twolayout
Related subcomponents cannot be introduced, but are present in the full package
Core code:
return {
path: getPath(name, options),
sideEffects: [
'vuesax/dist/vuesax.css'],}Copy the code
if (importSass) {
const dir = getCompDir(compName)
return `vuesax/src/components/${dir}`
}
else {
const dir = `${compName[0].toLowerCase()}${compName.slice(1)}`
return `vuesax/dist/${dir}`
}
Copy the code
We have not submitted PR for now, the component library V4 is in the alpha stage, the component is not complete, the changes may be significant, wait for a bit more stable
conclusion
After the weekend days, the feeling is still very fruitful, at least in vite can run vue2 component library of audience is very wide, not write useless registration code over and over again, did even better, in fact this plugin is still have some problem, such as the TSX/JSX components cannot be loaded as needed, in a separate right now you need to introduce other on-demand plugin. The plugin is meaningless and still friendly to template developers. All in all, it was nice to move the three component libraries to a usable state in vite ecology over the weekend, and it was gratified to contribute a little to the open source community