如何在vue项目中封装自己写的插件库并使用

如何在vue项目中封装自己写的插件库并使用

• 直接上样本

库文件@/utils/commonTJ.js

/*
 * @Description:公用方法合集
 * Vue.use(commonTJ, { axios: axios });
 * @Version: 1.0
 * @Autor: Tj
 * @Date: 2022-08-31 11:17:00
 */
import { Base64 } from "js-base64";
export default {
  install(Vue, options) {
    /**
     * 加密
     * 因为js-Base64通过main引入后中全局使用，在组件中不引入文件使用时Vscode代码提示报错，
     * 所以通过此插件中转通过vue对象$base64使用js-base64
     * @param {*} data
     * @returns
     */
    Vue.prototype.$base64Encode = data => {
      return Base64.encode(data);
    };
    /**
     * 解密
     * 因为js-Base64通过main引入后中全局使用，在组件中不引入文件使用时Vscode代码提示报错，
     * 所以通过此插件中转通过vue对象$base64使用js-base64
     * @param {*} data
     * @returns
     */
    Vue.prototype.$base64Decode = data => {
      return Base64.decode(data);
    };
    /**
     * 原js-Base64对象
     * 因为js-Base64通过main引入后中全局使用，在组件中不引入文件使用时Vscode代码提示报错，
     * 所以通过此插件中转通过vue对象$base64使用js-base64
     * @param {*} data
     * @returns
     */
    Vue.prototype.$base64 = Base64;
  }
};

在main.js中注册插件

import Vue from "vue";
import axios from "vue-axios";
import commonTJ from "@/utils/commonTJ";
//注册插件
const axiosOption = {
};
Vue.use(commonTJ, { axios: axios, axiosOption: axiosOption });

在组件中使用

示例：

this.$base64.encode("TJ");