Vue插件从打包到发布的完整步骤记录

插件的分类

添加全局方法或属性，如Vue-element，添加全局资源，如：指令v-bind，通过mixin方法添加一些混血儿，添加Vue实例方法，使用Vue.prototype上面的插件

通过全局方法Vue.use()使用插件。需要在调用new Vue()来启动应用程序之前完成：

//调用` my plugin . install(vue)` vue . use(my plugin)new vue({//.options})` `或者传入一个option对象：` ` javascriptvue.use (myplugin，{someoption3360 true})进行插件开发

Vue.js的插件有一个公开的install方法。这个方法的第一个参数是Vue构造函数，第二个参数是可选的option对象：

Myplugin.install=function (vue，options) {//1。添加全局方法或属性vue . myglobalmethod=function(){//logic.} //2.添加全局资源Vue.directive('my-directive '，{ bind (el，binding，vnode，OldVnode) {//logic.} .}) //3.注入组件vue . mixin({ create d : function(){//logic.} .}) //4.添加实例方法vue . prototype . $ my method=function(method options){ }其实不管采用什么方法，最终目的都是在项目中使用，并借助install的Vue参数自行打包

零基组装包装

需求：封装一个微博表情的enoji插件

准备好

节点环境vue环境vue-cli支架等等

创建项目

使用vue init创建一个简单的支架，简单的修改就可以适合插件开发

vueinit web pack-simple Weibo-emojicd Weibo-emojinpm安装开发目录如下：

插件实现

项目的具体逻辑实现可以到这里查看源代码

我们的普通webpack的条目通常被设置为main.js来执行一些操作，比如依赖项导入和视图挂载。当我们编写插件时，我们自然会省略挂载操作。

在这里，我们可以使用index.js作为我们的入口文件，公开的是一个使用这个安装方法的插件对象

代码如下：

从'导入weiboEmoji。/compontent/Weibo _ emo Ji ' const emo Ji={ install(Vue，options){ Vue.component(Weiboemoji . name，Weiboemoji)；}}if(窗口类型！==“未定义”窗口。Vue) { window。Vue.use(表情符号)；}导出默认表情符号版本

发布前检查webconfig配置：

入口：’。/src/index.js '，//entry output 3360 { path : path . resolve(_ _ dirname，'。/dist ')，//封装输出目录publicpath3360'/dist/'，//静态资源前缀filename : ' vue-Weibo-emoji . js '，//封装时封装生成的文件库的名称： 'WeiboEmoji '，//封装时模块的umd名称，//封装方法amd umdnameddefines : true//封装未定义时默认名称。

“name”:“Weibo-emoji”，//是打包的项目名，也就是modemodules中的文件夹名，也就是从导入后的名称“main”:“dist/vue-Weibo-emoji . js”，//依赖于访问nodemodules。实际导入的文件相当于入口‘repository’: {//仓库看起来像仓库内容，不影响发布内容，所以只需填写‘type’:‘git’、‘URL’:‘https://github.com/icebluesky2666/Weibo-emoji'}. Description’:‘一个微博表情插件’、//Description‘version’:‘1 . 0 . 2’、//version‘author’:‘JH Qin’、//author‘licence’:‘MIT’、//license type for multiple

最后：

使用npm构建npm登录npm发布

从“Weibo-emoji”vue . use(Weibo-emoji)Weibo-emoji class=“emoji”: Weibo icon=“Weibo icon”@ change emoji=“selscemoji=arguments[0]”导入Weibo莫吉。短语' ref='表情符号'/微博

源代码

微博-表情符号(本地下载)

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。