兼容vue2和vue3版本的插件实现过程

yarn add vue-demi
or
npm install vue-demi

/*
 * @use: 
 * @description: 全局使用的指令，不用区分版本进行使用
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-09-06 16:09:42
 * @LastEditTime: 2022-09-06 16:19:17
 * @FilePath: /csdn_common_plugin/src/plugin/directive/index.js
 */
import { isVue3 } from "vue-demi";
const dire2 = {
    bind(el, binding) {
        el.addEventListener('click', () => {
            console.log("====>dire2", binding)
        })
    }
}
const dire3 = {
    beforeMount(el, binding) {
        el.addEventListener('click', () => {
            console.log("====>dire3", binding)
        })
    }
}
export default isVue3 ? dire3 : dire2

/*
 * @use: 
 * @description: 测试全局函数 不同版本也可以直接进行使用
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-09-06 16:13:12
 * @LastEditTime: 2022-09-06 16:17:17
 * @FilePath: /csdn_common_plugin/src/plugin/commonfs/index.js
 */
/**
 * 
 * @param {*} v  
 */
let checkPlugin = (v) => {
    console.log('执行成功', v)
}
export default checkPlugin

/*
 * @use: 
 * @description: 统一出口文件
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-09-06 16:08:02
 * @LastEditTime: 2022-09-06 16:18:47
 * @FilePath: /csdn_common_plugin/src/plugin/index.js
 */
import { isVue3 } from "vue-demi";
import dire from './directive/index.js'
import checkPlugin from './commonfs/index.js'
const ins2 = {
    install(Vue) {
        // HACK: 指令和全局函数根据实际业务需求进行更改
        Vue.directive('csdn', dire)
        Vue.prototype.$csdn = (params = {}) => {
            checkPlugin(params)
        }
    }
}
const ins3 = {
    install(app) {
        app.directive('csdn', dire);
        app.config.globalProperties.$csdn = (params = {}) => {
            checkPlugin(params)
        }
    }
}
export default isVue3 ? ins3 : ins2

import { isVue3 } from "vue-demi";
// FIXME: 这里VITE和VUE名字都是自己的，需要自己根据实际.env文件进行配置  当前插件没有进行axios进行封装
axios.defaults.baseURL = isVue3 ? import.meta.env.VITE_APP_BASE_URL : process.env.VUE_APP_BASE_URL

{
  "name": "csdn_common_plugin",
  "version": "0.1.0",
  "private": false,
  "main":"./src/plugin/index.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-demi": "^0.13.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

npm login

npm whoami

npm publish

import csdn from 'csdn_common_plugin'
app.use(csdn)

  <p v-csdn @click="ceshi">vite中进行测试,请点击</p>
  let ceshi = () => {
        globalProxy.$csdn();
    };

import csdn from 'csdn_common_plugin'
Vue.use(csdn)

    <p v-csdn @click="ceshi">vue2测试,请点击</p>
    ceshi(){
      this.$csdn();
    }