关于前端:Vue如何解决组件兼容Vue2和Vue3

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

vue-demi

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

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

1. 装置一个 Vue3 的我的项目

这里我选用的 vite 装置

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

装置实现，进入目录pm-ui-coms

npm i vue-demi -S

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

{
    "publishConfig": {"registry": "http://192.168.1.200:8081/repository/npm-private/"}
}

publishConfig

公布应用的配置

2. 装置一个 Vue2 的我的项目

vue create vue2

装置实现，进入目录vue2

npm i vue-demi -S

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

{
    "peerDependencies": {
        "@vue/composition-api": "^1.7.1",
        "vue": "^2.6.14 || >=3.2.47"
    },
    "peerDependenciesMeta": {
        "@vue/composition-api": {"optional": true}
    }
}

在 vue2 以上操作实现后，如果失败，须要从新 npm install

测验是否装置实现，执行此命令，如果显示所有换到 Vue2，阐明胜利

npx vue-demi-switch 2

peerDependencies

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

peerDependencies 的目标是提醒宿主环境去装置满足插件 peerDependencies 所指定依赖的包，而后在插件 import 或者 require 所依赖的包的时候，永远都是援用宿主环境对立装置的 npm 包，最终解决插件与所依赖包不统一的问题

peerDependenciesMeta

增加可选设置以打消失落的对等依赖性正告

增加构建命令

{
    "scripts": {
        "lib": "vite build --mode lib",
        "gulp": "gulp lib"
    }
}

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import pmVueLib2 from './plugins/pmVueLib2' // 我本人写的自动化构建 + 上传
import path from 'path'; // node 插件，不必装置个别自带这个包

export default defineConfig({plugins: [vue(), pmVueLib2({versionType: 'patch'})],
    optimizeDeps: {exclude: ['vue-demi'] // vue-demi 如果是 vite 须要增加此配置
    },
    build: {
        outDir: 'lib', // 输入的目录
        lib: {entry: path.resolve(__dirname, './src/packages/install.js'), // 入口文件
            name: 'PmUiComps', // 在浏览器 umd 模式下输入的全局变量
            fileName: (format) => `v3.${format}.js`, // 由 formats 决定输入的文件后缀名
            formats: ['es', 'umd'], // 输入 ES Module 和 umd
        },
        rollupOptions: {
            // 确保内部化解决那些你不想打包进库的依赖
            external: ['vue', 'vue-demi'],
            output: {
                // 在 UMD 构建模式下为这些内部化的依赖提供一个全局变量
                globals: {
                    vue: 'Vue',
                    "vue-demi": 'VueDemi'
                }
            }
        }
    }
})

pmVueLib2 插件

为了不便疾速上传打包，写了一个 vite 插件

const exec = require('child_process').exec; // 执行 node 命令，能够指定目录
const shell = require("shelljs");  // 执行文件操作
const chalk = require('chalk'); // 显示黑白文字
const ora = require('ora') // 命令行 loading
const pmVueLib2 = (options) => {
    // patch minor major
    const _options = Object.assign({versionType: 'patch'}, options)
    console.log(chalk.green(`🚀   构建 vue3 库胜利 `))
    return {
        name: 'pmVueLib2', // 必须的，将会在 warning 和 error 中显示
        buildEnd() {const spinner = ora('🚀   开始构建 vue2 库...').start();
            exec('npm run lib', {cwd: './vue2'}, (err, stdout, stderr) => {if (err) {console.warn(new Date(), '构建 vue2 库失败');
                } else {
                    spinner.color = 'green'
                    spinner.text = '构建 vue2 库胜利'
                    console.log(chalk.green(`🚀   构建 vue2 库胜利 `))
                    exec('npm run gulp', {}, (err) => {if (!err) {shell.exec('git add .')
                            shell.exec(`git commit -m msg: 自动更新组件库 `)
                            shell.exec(`git push`)
                            exec(`npm version ${_options.versionType}`, {}, (err) => {if (!err) {exec('npm publish', {}, () => {
                                        spinner.color = 'yellow'
                                        spinner.text = '构建结束，组件库已胜利上传 npm 仓库'
                                        console.log(chalk.green(`🚀   构建结束，组件库已胜利上传 npm 仓库 `))
                                    })
                                } else {console.log(err)
                                }
                                spinner.stop();})
                        }
                    })
                }
            });
        }
    }
}
export default pmVueLib2;

组件地位

对立将组件放在 common 文件下

构建库

npm run lib

github 地址

应用此仓库开发

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

npm install 

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

npm install

3. 在根目录执行

npm run lib