This is a technical practice article about VUE making VUE2/3 general version of the article, from the beginning of the idea to achieve, before and after a month of time, familiar with vuE-DEMi principle, can skip the previous source code reading links, directly look at the back to create general components

background

As a tech lead, have you been thinking about playing vue3? The doubts are as follows

  1. All the old projects are written by VUe2. How to integrate with the code of VUe2?
  2. The old project vue2 is too big, I don’t want to turn it all into 3, but TS is very nice, especially suitable for team development, what’s wrong?
  3. The new project with vuE3 new technology research and development come out, the boss a look good! Add this module to the original old project and continue to sell! Should we downgrade the code?

recommended

Get on vue3 and use vuE-demi to break through the barrier of VUE2-vue3. This operation directly solves the three problems mentioned above.

To prepare

Before I have written the relevant article, about this aspect of thinking, but at that time did not give a clear practice demo, thinking in the past to prepare to view this article, here do not repeat vue-Echarts source code interpretation at that time put forward the following questions:

  • Currently, most vue-demi are written using rend functions. does it support template writing and publishing?
  • How to release a support for two versions, is v2 and V3 to pack two sets?
  • How can we test that it supports both V2 and V3?

To that end, I took a closer look at how Vue-Demi works

Vue-demi source code interpretation

First read the source code, type annotations, and then use the source code reader agMD to generate the following MD, the main module functions are shown in the figure

Take a closer look at the V3 core code, here I take a screenshot of its historical version, in order to be more intuitive to let you see its function implementation, do what? In the VUE3 environment, nothing was done, because we wrote code the way vue3 did

Take a look at V2, which uses @vue/composition-api. Isn’t that how composition-API should be used in vue2? On the right! @vue/ composition-API as vue’s version changes, vue is being updated all the time. It is maintained by You, so if you have a problem with vue-Demi, don’t make an issue. Vue-demi said he was innocent, he just made a transfer. The functionality is done by @vue/composition-api

Vu3 does nothing, vue2 adds @vue/composition-api

Create a universal plug-in for VUE2 2/3

Entering into the topic, we can also use the same principle to make a component, type two packages, one V2 and one V3 code, and then judge and use the corresponding version according to the VUE version. The following is my case vuE3-Sketch-ruler, and generate an MD with AGMD for auxiliary explanation

You may have a question, why are there two versions? Type a code like Vue-Echarts, doesn’t he smell good?

I also want to, but after testing, it does not work, my core function is to use THE SFC Vue file package, write is the template, not the render function, we check the source code to know, about template parsing, V2 and V3 parsing out of the general, because v3 is fast, Because of the comparison of Temlate optimization, specific optimization we can view vue3 source

Since the packaged template is not universal, you can package it in two environments, type v2 and V3 versions respectively, and use the Postinstalll installation script to switch the versions. The switching principle is as follows:

This switch is written in reference to Vue-Demi and is almost identical to it

Finally, the package containing V2 and V3 version released, users download and install when the script installation to get the corresponding file, here is a general plug-in is completed, which details of the source code is shown here, we can put the plug-in source code I introduced to download down to see

Pay attention to the point

  1. I made a lot of mistakes in doing this test, otherwise I wouldn’t have published this article until now. First of all, the official case of Vue-Demi doesn’t have template packaging, and other cases either use JSX or render. Anyway, I haven’t found one to package template. Finally, the practice proved to be feasible.
  2. Regardless of development or packaging, we should pay attention to the switch of vUE version, otherwise it is easy to report errors, weird events, or vue2 can not when vue3, or development can not package the production environment

The last

In fact, even when I write this article, I still feel that my demo is not perfect. The way I set up the project only realizes the code that needs to be packaged, and does not realize that the demo can also be shared. Can we make all vue2 2/3 packages in one project? I think it is ok, you can try it, you can give me a PR, or post your demo address in the comment area, we can discuss

Code word is not easy, we feel that this article is of some help to you, please point a favor to support it, if you can have a attention is better, attention does not get lost, the follow-up to send you more dry goods!

Case study: VUE3 – Sketch -ruler