vue插件开发

一、背景

由于定时任务需求是以一个管理后台为基础，定时任务以一个外部引入或者插入的形式出现在管理后台中的；所以需要该组件（插件）要能够与管理后台拆分开来，在前端层面不能与管理后台的代码和功能耦合太强；所以针对此问题设计出以下方案来实现。

二、功能概要

（1）定时任务列表

包括已创建的定时任务列表、分页功能、必要的操作按钮；

（2）创建定时任务弹窗

包括创建定时任务所需的输入框和按钮

（3）查看已创建定时任务弹窗

包括显示定时任务详细信息的展示

三、实现方式

（1）概述

以插件和组件混合形式实现，其中列表、分页使用Element抽离成单独的组件来实现；再把各个功能组合到一起，打包形成一个组件文件；然后通过NPM发布到npm市场上形成一个稳定的版本，供使用方进行使用；使用方只需要安装此插件，传参并使用；就可以在页面中呈现出插件的页面和功能。

（2）实现步骤

1.开发准备：

①使用vue-cli脚手架工具进行创建：vue init webpack-simple //文件名 不支持驼峰（含大写字母）
②创建好后创建lib文件夹，存放你的插件代码，其中包括vue文件（业务逻辑）和js文件（暴露install方法），同时运行cnpm i 或者npm i安装所需依赖

③随便在vue文件中编写一些代码，以便等会儿测试，注意组件的name必须是唯一的，不然引用的时候有同名会出现报错；index.js中书写暴露方法；然后去main.js更改里面的配置，去掉无用的vue和router的引用，直接引用lib中的index.js文件，并暴露出来；

//index.js
import VueComment from './crontab.vue'
const comment = {
  install: function (Vue) {
    Vue.component(VueComment.name, VueComment)
  }
}
// 这里的判断很重要
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(comment)
}
export default comment

//main.js
import VueComment from './lib/index.js'
 
export {VueComment}

④到此就可以先进行开发了，为了能够在其他地方看到页面，并热更新；这时候不可能立马配置打包或者发布源码到npm上，所以这里需要用到npm link功能，在本项目中直接允许npm link把项目挂到全局；然后去别的项目的main.js中增加引入；并在你需要使用的地方进行标签引入或者挂载方法到vue.property.$<方法名称>，然后在该项目中运行npm link <插件的项目名> ,然后再运行项目即可。

使用方引入：

（1）首先需要安装插件，通过npm install $<插件名称>，这里以定时任务举例：npm install vhall-crontab

(2)在应用入口文件mian.js注册该插件；注意这里和引入打包后的js有点不一样哈，这里有点类似把文件打入了项目的依赖包中的意思。

(3)具体页面使用：

四、打包和发布

打包最好就用yarn打包，应用最好用webpack；打包就直接打成一个js就行，记得打包的时候要改package中main的入口，如果你是本地，也就是dev环境直接运行在开发工具中的话，你就是main.js的入口，如果是打包出来就应该是dist/${你要打出来的文件名}.js，然后你再去Windows PowerShell中登录npm或者别的平台去发布你的代码，发布自己百度一下就知道怎么发布版本并打入项目依赖了；也可以不发布每次引入打包出来的js也行。