为何须要解决此类问题，在于公司的我的项目业务须要，以及前端技术驱动向前推动 ，须要应用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') // 命令行loadingconst 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