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: [
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: [
Copy the code

At this point, the problem is solved.

2. The introduction ofviteCommonjsAfter 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-calendarIt 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 selectoptionoroptionGroupThe re of is usedopts.tag.matchThe way to judge, at this time iftagforundefinedErrors 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:…

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,

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

  if (/^Date/.test(compName))

  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,sassOtherwise, 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 asVsSidebarGroupThe true catalog isvsSidebar/GroupThe 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 compilationVsSidebarGroupThere’s a list ofindex.jsandstyle.css, the first letter of the component directory is lowercase, and the conversion is correct.

Introduced 3.layoutChild componentsrow,colPath problem of

  • Source:layoutThe next component is placed withcomponentsThe same level directory, so the time to match the need to the upper level search, can be normally introduced
  • Compile code:distThe catalog is not typedlayoutThe bag that led to these twolayoutRelated 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


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