Home  >  Article  >  Web Front-end  >  An article explains in detail how to differentiate the project according to the vue version

An article explains in detail how to differentiate the project according to the vue version

青灯夜游
青灯夜游forward
2022-12-22 21:29:162762browse

How to differentiate according to version? The following article will introduce to you the method of differentiation according to the vue version in the project. I hope it will be helpful to you!

An article explains in detail how to differentiate the project according to the vue version

Recently, when initializing and building a project, I encountered a console error problem, lib_exports.getCurrentInstance is not a function, and I am troubleshooting this problem. I learned some knowledge in the process: there are many versions of vue, such as 2.6.x, 2.7, 3.x. Different vue versions have usage differences, and different Different Vue versions will be used in the project. Assuming that a public tool needs to be provided to different projects, how can the tool be differentiated according to the Vue versions in different projects? You can first think about how to implement it, and then continue reading with questions in mind. [Related recommendations: vuejs video tutorial, web front-end development]

An article explains in detail how to differentiate the project according to the vue version

Initial troubleshooting

As can be seen from the error screenshot, the direct cause is the console error caused by calling the getCurrentInstance method in the useVModel method of vueuse. From the vueuse source code, you can see that vueuse imports the getCurrentInstance method from vue-demi.

Then look at the source code of vue-demi, as shown below, and I found something wrong. The vue version I use for this project is vue2. Why is isVue = true in the code? ? Moreover, getCurrentInstance is built-in only in vue2.7 and vue3. Before vue2.7, getCurrentInstance can only be used through @vue/composition-api.

An article explains in detail how to differentiate the project according to the vue version

vue-demi principle

##vue-demi is a simultaneous support A tool library for writing tools for vue2.x and vue3.x. Vueuse uses this library to smooth out some differences between vue2.6.x, vue2.7, and vue3.x.

Look at the

scripts section of package.json of vue-demi, you can see that it is configured with postinstall npm scriptHook, postinstallHook will be executed after you execute the pnpm install command.

An article explains in detail how to differentiate the project according to the vue version##Let's see what

node_modules/vue-demi/scripts/postinstall.js

does. It will first try to load vue (require('vue')). Please note here that if you configure a vue alias in vite or webpack, such as { find: /^vue$/, replacement: '@xf/vue' },, it will not take effect on the script here. Yes, because the script is executed immediately after the dependencies are installed. The project has not been started at this time, and it has nothing to do with Vite. After trying to load vue, it determines the condition and executes the switchVersion method.

An article explains in detail how to differentiate the project according to the vue versionThe main thing the switchVersion method does is copy different configuration contents based on the passed in version number parameters and replace them in the target file.

An article explains in detail how to differentiate the project according to the vue versionIf it is vue2.5 or vue2.6, then it copies the following source code content:

An article explains in detail how to differentiate the project according to the vue version If it is vue3, then it copies the following source code content:

An article explains in detail how to differentiate the project according to the vue version

vue-demi

The principle of implementing differentiated processing for different vue versions is in this way.

Root cause and solution

Go back to the console error problem in the project. This is because

vue-demi

cannot recognize the project vue in, because the project installed is @xf/vue after the vue source code was modified, and there is no pnpm add vue. If it is not recognized, vue-demi uses the default configuration (the default configuration is vue3 configuration). The vue we use when running the code is vue2.5.X. If you try

import { getCurrentInstance } from 'vue'

, you will definitely get an error. <p>The solution is <code>vue-demi provides a command to manually switch the vue version configuration. We configure the prepare npm script for the project: npx vue-demi-switch 2, configured After that, it will be executed every time you install project dependencies and manually switch to vue2 configuration.

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of An article explains in detail how to differentiate the project according to the vue version. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete