Vue如何解决组件兼容Vue2和Vue3?

为何需要解决此类问题，在于公司的项目业务需要，以及前端技术驱动向前推进 ，需要使用Vue3开发新的组件库，需要兼容Vue2的产品(公司现阶段Vue2产品为主)

vue-demi

Vue Demi（法语的一半）是一个开发实用程序，允许您为 Vue 2 和 3 编写通用 Vue 库，作者也是Vue开发核心人物之一

如何搭建一个Vue2/3的组件兼容库?

1.安装一个Vue3的项目

这里我选用的vite安装

1npm create vite@latest pm-ui-coms --template vue

安装完成，进入目录pm-ui-coms

1npm i vue-demi -S

修改package.json文件,文件以下内容

1{
2    "publishConfig": {
3        "registry": "http://192.168.1.200:8081/repository/npm-private/"
4    }
5}

publishConfig

发布使用的配置

2.安装一个Vue2的项目

1vue create vue2

安装完成，进入目录vue2

1npm i vue-demi -S

修改package.json文件,文件以下内容

1{
2    "peerDependencies": {
3        "@vue/composition-api": "^1.7.1",
4        "vue": "^2.6.14 || >=3.2.47"
5    },
6    "peerDependenciesMeta": {
7        "@vue/composition-api": {
8            "optional": true
9        }
10    }
11}

在vue2以上操作完成后，如果失败，需要重新npm install

检验是否安装完成，执行此命令，如果显示一切换到Vue2，说明成功

1npx vue-demi-switch 2

peerDependencies

没写过npm插件包的同学可能会有点陌生

peerDependencies的目的是提示宿主环境去安装满足插件peerDependencies所指定依赖的包，然后在插件import或者require所依赖的包的时候，永远都是引用宿主环境统一安装的npm包，最终解决插件与所依赖包不一致的问题

peerDependenciesMeta

添加可选设置以消除丢失的对等依赖性警告

添加构建命令

1{
2    "scripts": {
3        "lib": "vite build --mode lib",
4        "gulp": "gulp lib"
5    }
6}

1import {defineConfig} from 'vite'
2import vue from '@vitejs/plugin-vue'
3import pmVueLib2 from './plugins/pmVueLib2' // 我自己写的自动化构建+上传
4import path from 'path'; // node插件，不用安装一般自带这个包
5
6export default defineConfig({
7    plugins: [vue(), pmVueLib2({versionType: 'patch'})],
8    optimizeDeps: {
9        exclude: ['vue-demi'] // vue-demi 如果是vite需要添加此配置
10    },
11    build: {
12        outDir: 'lib', // 输出的目录
13        lib: {
14            entry: path.resolve(__dirname, './src/packages/install.js'), // 入口文件
15            name: 'PmUiComps', // 在浏览器umd模式下输出的全局变量
16            fileName: (format) => `v3.${format}.js`, // 由formats决定输出的文件后缀名
17            formats: ['es', 'umd'], // 输出ES Module 和 umd
18        },
19        rollupOptions: {
20            // 确保外部化处理那些你不想打包进库的依赖
21            external: ['vue', 'vue-demi'],
22            output: {
23                // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
24                globals: {
25                    vue: 'Vue',
26                    "vue-demi": 'VueDemi'
27                }
28            }
29        }
30    }
31})
32

pmVueLib2插件

为了方便快速上传打包，写了一个vite插件

1const exec = require('child_process').exec; // 执行node命令，可以指定目录
2const shell = require("shelljs");  // 执行文件操作
3const chalk = require('chalk'); // 显示彩色文字
4const ora = require('ora') // 命令行loading
5const pmVueLib2 = (options) => {
6    // patch minor major
7    const _options = Object.assign({versionType: 'patch'}, options)
8    console.log(chalk.green(`🚀   构建vue3库成功`))
9    return {
10        name: 'pmVueLib2', // 必须的，将会在 warning 和 error 中显示
11        buildEnd() {
12            const spinner = ora('🚀   开始构建vue2库...').start();
13            exec('npm run lib', {cwd: './vue2'}, (err, stdout, stderr) => {
14                if (err) {
15                    console.warn(new Date(), '构建vue2库失败');
16                } else {
17                    spinner.color = 'green'
18                    spinner.text = '构建vue2库成功'
19                    console.log(chalk.green(`🚀   构建vue2库成功`))
20                    exec('npm run gulp', {}, (err) => {
21                        if (!err) {
22                            shell.exec('git add .')
23                            shell.exec(`git commit -m msg:自动更新组件库`)
24                            shell.exec(`git push`)
25                            exec(`npm version ${_options.versionType}`, {}, (err) => {
26                                if (!err) {
27                                    exec('npm publish', {}, () => {
28                                        spinner.color = 'yellow'
29                                        spinner.text = '构建完毕，组件库已成功上传npm仓库'
30                                        console.log(chalk.green(`🚀   构建完毕，组件库已成功上传npm仓库`))
31                                    })
32                                } else {
33                                    console.log(err)
34                                }
35                                spinner.stop();
36                            })
37                        }
38                    })
39                }
40            });
41        }
42    }
43}
44export default pmVueLib2;

组件位置

统一将组件放在common文件下

构建库

1npm run lib

github地址

使用此仓库开发

1.下载此项目代码, 在根目录执行

1npm install 

2.进入vue2目录,然后执行

1npm install

3.在根目录执行

1npm run lib