用vue写一个插件

概念 ： vue 插件 cn.vuejs.org/v2/guide/pl…

步骤：

1. 新建一个打包入口文件，起名为 meetingCom.js

   • 明确目标：a. 要提供的到底是一个什么样的组件 b.提供这样一个组件，需要什么依赖

   • 引入依赖，抛出install方法

2. 在package.json中添加命令："build:meeting": "vue-cli-service build --target lib --name meetingCom src/meetingHomeCom.js --mode meet"

   • 命令配置详细见vueCli官方文档：cli.vuejs.org/zh/guide/bu…

3. 执行命令：npm run build:meeting，生成dist文件夹

4. 将dist 文件夹下的 meetingCom.umd.min.js部署到cdn

注意点：

对vue项目来说，vue axios router vuex 环境配置 等的封装一般是必备的，但是对插件来说，可能并不是这样

1. 插件中 install 方法中会默认传入Vue ，所以不需要处理

2. axios 必须要封装，因为每个项目请求接口的方式可能不同

3. vuex 看项目依赖，如果是强依赖建议自己引入，使用命名空间的方式注册module，避免冲突，如果用到的变量少，则可简单处理

4. router 不建议引入，除非所有已配置路由的组件 都属于插件的一部分

5. 兼容：

   • 执行 install 方法的时候，要清楚的知道传入的Vue use过什么插件，原型挂载了什么属性

     • use 过的插件不需要再use一遍

     • 原型已挂载的属性，切记不能覆盖 eg:项目中 vue.prototype.configer 已经存在，项目内部的插件install的时候一定不能将这个属性覆盖

   • 一般来说自己项目提供给外部的组件，一般也能在自己项目内部使用，所以建议对使用场景进行兼容

     • 主要就是 对vuex axios 环境配置（configer）的兼容

打包：

1. 执行 npm run build:meeting 的时候，入口文件是在命令行指定的文件

2. 如果命令行中不指定mode，默认打包模式为production

3. 打包后可能会产生css文件，如果想将css强制内联，可以配置 css: { extract: false }

4. 注意打包入口文件内部的依赖如果是cdn引入的，打包的时候最好使用本地依赖而不是配置了external的依赖

5. 如果提供的插件里面有图片，建议使用svg base64 或者线上地址引入

调试：

1. 在自己项目中调试

   • 在main.js 中引入meetingHomeCom.js ，use插件

2. 调试打包后的插件

   • 在目标项目中进行调试，同时cdn引入dist文件夹中的meetingCom.umd.js和对应的map文件