Vue插件从封装到发布的完整步骤记录

插件的分类

  • 添加全局的方法或者属性 比如：vue-element
  • 添加全局的资源 比如：指令 v-bind
  • 通过mixin方法添加的一些混合
  • 添加Vue实例方法 Vue.prototype上面

插件的使用

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

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
 //... options
})```

也可以传入一个选项对象：
``` javascript
Vue.use(MyPlugin, { someOption: true })

插件开发

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

MyPlugin.install = function (Vue, options) {
 // 1. 添加全局方法或属性
 Vue.myGlobalMethod = function () {
 // 逻辑...
 }

 // 2. 添加全局资源
 Vue.directive('my-directive', {
 bind (el, binding, vnode, oldVnode) {
  // 逻辑...
 }
 ...
 })

 // 3. 注入组件
 Vue.mixin({
 created: function () {
  // 逻辑...
 }
 ...
 })

 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (methodOptions) {
 // 逻辑...
 }

 //5.直接注册组件
 Vue.use();
}

其实无论采用什么方式，最终的目的则是在项目中可以使用，借助install 的Vue参数具体自己进行封装

从零开始的组件封装

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

准备

node环境 vue环境 vue-cli脚手架 等等

创建工程

使用vue init 创建简单脚手架，简单修改就可以适合插件开发

vue init webpack-simple weibo-emoji
cd weibo-emoji
npm install

开发目录如下:

插件实现

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

我们正常webpack的entry入口一般会设置为main.js 做一些依赖引入和视图挂载等的操作,当我们编写插件的时候理所当然的就会省去挂载这一步操作了。

这里我们可以将index.js作为我们的入口文件，暴露出去的则是一个有这install方法的插件对象

代码如下:

import weiboEmoji from './compontent/weibo_emoji'
const emoji = {
 install(Vue, options) {
  Vue.component(weiboEmoji.name, weiboEmoji);
 }
}
if (typeof window !== 'undefined' && window.Vue) {
 window.Vue.use(emoji);
}
export default emoji

发布

发布之前检查一下webconfig配置：

 entry: './src/index.js',// 入口
 output: {
  path: path.resolve(__dirname, './dist'),//打包输出目录
  publicPath: '/dist/',// 静态资源前缀
  filename: 'vue-weibo-emoji.js', //打包生成文件的名字
  library: 'WeiboEmoji', //umd 打包的时候模块的名字
  libraryTarget: 'umd',//打包方式 amd
  umdNamedDefine: true //打包未定义的时候使用默认名字
 },

检查发布配置：

 "name": "weibo-emoji", // 打包的项目名，也就是modemodules里面的文件夹名字 也就是import from之后跟的名字
 "main": "dist/vue-weibo-emoji.js", // 是访问到nodemodules依赖，实际引入的文件 相当于入口
 "repository": {// 仓库 貌似仓库内容也不影响发布内容，填对就行
  "type": "git",
  "url": "https://github.com/icebluesky2666/weibo-emoji"
 },
 "description": "A Weibo emoji plugn",// 描述
 "version": "1.0.2",// 版本
 "author": "jhqin",// 作者
 "license": "MIT",// license 类型

对于多次发布，必须每次的版本号都不同

最后：

 npm build
 npm login
 npm publish

使用

import WeiboEmoji from 'weibo-emoji'
Vue.use(WeiboEmoji)
<weibo-emoji class="emoji" :weiboIcon="weiboIcon" @changeEmoji="selsctEmoji = arguments[0].phrase" ref="emoji"> </weibo-emoji>

效果：

源码

Weibo-Emoji (本地下载)

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 第一个Vue插件从封装到发布

    第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue-area-select     欢迎指正 准备 Vue官网插件部分的介绍虽然很简单,但是还是好好刷一遍的.由于此插件较为简单,主要用到以下两个点: 1 . Vue的插件需要有一个公开方法install 2 . 通过全局方法 Vue.use() 使用插件,在下文有栗子 创建工程 初始化工程 vue

  • bootstrap select插件封装成Vue2.0组件

    bootstrap select插件封装成Vue2.0组件

    因为bootstrap-select功能比较强大,而且样式还不错,所以在项目使用了vue,所以,觉得对bootstrap-select进行封装. html 复制代码 代码如下: <my-select :options="input.options" v-model="input.value" ref="typeSelect" :index="index" :childidx="childIdx" :l

  • Vue二次封装axios为插件使用详解

    照例先贴上 axios的 gitHub 地址 不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说: 基本的封装要求: 统一 url 配置 统一 api 请求 request (请求)拦截器,例如:带上token等,设置请求头 response (响应)拦截器,例如:统一错误处理,页面重

  • Vue封装的可编辑表格插件方法

    可任意合并表头,实现单元格编辑. 页面效果如图: 页面使用如下: <template> <div> <v-table :datat = "tableData" :thlabel="thlabel" :isEdit="true"> </v-table> </div> </template> <script> export default{ data(){ retur

  • 用vue封装插件并发布到npm的方法步骤

    用vue封装插件并发布到npm的方法步骤

    一.基于vue的国家区号列表 vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号. 全球区号列表 1.1 初始化组件 用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来. vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev 1.2 根据自己的需求,实现具体功能,我的主要功能写在v

  • vue移动端微信授权登录插件封装的实例

    1.新建wechatAuth.js文件 const queryString = require('query-string') //应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称.性别.所在地.并且,即使在未关注的情况下,只要用户授权,也能获取其信息) const SCOPES = ['snsapi_base', 'snsapi_userinfo'] class VueWe

  • vue封装第三方插件并发布到npm的方法

    vue封装第三方插件并发布到npm的方法

    前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心. gitment gitment是一个基于github issues封装的评论插件,以这个插件作为演示,把它封装成vue插件.vue-gitment,该插件已发布到npm,并在自己的开源项目vueblog中安装使用 项目初始化 封装vue的插件用

  • Vue插件从封装到发布的完整步骤记录

    Vue插件从封装到发布的完整步骤记录

    插件的分类 添加全局的方法或者属性 比如:vue-element 添加全局的资源 比如:指令 v-bind 通过mixin方法添加的一些混合 添加Vue实例方法 Vue.prototype上面 插件的使用 通过全局方法 Vue.use() 使用插件.它需要在你调用 new Vue() 启动应用之前完成: // 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) new Vue({ //... options })``` 也可以传入一个选项对象: ``` ja

  • Vue项目打包并发布的完整步骤记录

    Vue项目打包并发布的完整步骤记录

    目录 1.安装部署Nginx服务器.(类似Tomcat服务器) 2.Vue项目打包. 总结 如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1.安装部署Nginx服务器.(类似Tomcat服务器) 说明:Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.同时,也是一种轻量级的Web服务器,可以作为独立的服务器部署网站. (1)官方下载网址:http://nginx.org/ (2)下载之后,得到

  • vue封装TabBar组件的完整步骤记录

    vue封装TabBar组件的完整步骤记录

    目录 实现思路: 步骤一:TabBar和TabBarItem的组件封装 步骤二:给TabBarItem传入active图片 步骤三:TabBarItem和路由的结合效果 步骤四:TabBarItem的颜色控制 用字体图标实现 引入字体图标 运用 总结 实现思路: 步骤一:TabBar和TabBarItem的组件封装 做到这,可以发现页面的基本布局已经实现了,但是item的点击活跃状态还没实现 步骤二:给TabBarItem传入active图片 为了防止替换的内容直接整个替换掉插槽,从而插槽上定义

  • vue3封装Notification组件的完整步骤记录

    vue3封装Notification组件的完整步骤记录

    目录 创建 插入 移除 在App.vue中使用 总结 跳过新手教程的小白,很多东西都不明白,不过是为了满足一下虚荣心,写代码的成就感 弹窗组件的思路基本一致:向body插入一段HTML.我将从创建.插入.移除这三个方面来说我的做法 先来创建文件吧 |-- packages |-- notification |-- index.js # 组件的入口 |-- src |-- Notification.vue # 模板 |-- notification.ts 创建 用到h,render,h是vue3对

  • 在Vue中使用Echarts可视化库的完整步骤记录

    前言 由于最近项目需要做可视化数据展示,也就是用图表展示数据,他还有一个很高端的名字:"大数据可视化"(参考图一),首先考虑选择什么图表库来作为基础开发,目前被普遍认可的是Hcharts.Echarts.AntV. 介绍: Hcharts:国外的一款图表库,是图表库的领头羊 Echarts:百度开发的数据可视化库,国内图表库的 "领军人物" AntV:是蚂蚁金服开发的数据可视化库 总结出以下几个优略点区别Echarts.Hcharts哪个比较合适: 1.学习容易程度

  • vue组件从开发到发布的实现步骤

    vue组件从开发到发布的实现步骤

    本文介绍了vue组件从开发到发布的实现步骤,分享给大家,具体如下: 组件化是前端开发非常重要的一部分,从业务中解耦出来,可以提高项目的代码复用率.更重要的是我们还可以打包发布,俗话说集体的力量是伟大的,正因为有许许多多的开源贡献者,才有了现在的世界. 不想造轮子的工程师,当不了合格的搬运工 .让我们来了解一下vue组件从开发到打包发布流程,并配置Github主页. 本文以 vue-clock2 组件为例,欢迎star _~~ 项目地址 目标框架:vue 打包工具:webpack 发布源:npm

  • Java发起http请求的完整步骤记录

    Java发起http请求的完整步骤记录

    前言 在未来做项目中,一些功能模块可能会采用不同的语言进行编写.这就需要http请求进行模块的调用.那么下面,我将以Java为例,详细说明如何发起http请求. 一.GET与POST GET和POST是HTTP的两个常用方法. GET指从指定的服务器中获取数据 POST指提交数据给指定的服务器处理 1.GET方法 使用GET方法,需要传递的参数被附加在URL地址后面一起发送到服务器. 例如:http://121.41.111.94/submit?name=zxy&age=21 特点: GET请求

  • Golang操作MySql数据库的完整步骤记录

    前言 MySQL是业界常用的关系型数据库,在平时开发中会经常与MySql数据库打交道,所以在接下来将介绍怎么使用Go语言操作MySql数据库. 下载MySql连接驱动 Go语言中的database/sql包提供了保证SQL或类SQL数据库的泛用接口,并不提供具体的数据库驱动.使用database/sql包时必须注入(至少)一个数据库驱动. 我们常用的数据库基本上都有完整的第三方实现.比如:MySQL驱动 **下载依赖** go get -u github.com/go-sql-driver/my

  • Vue封装通用table组件的完整步骤记录

    Vue封装通用table组件的完整步骤记录

    目录 前言 为什么需要封装table组件? 第一步:定义通用组件 第二步:父组件与子组件进行render通信 第三步:使用组件 总结 前言 随着业务的发展和功能的增多,我们发现不少页面都具备相似的功能,这里举几个比较俗的例子:可以多选的下拉菜单,带输入的对话框,日期选择器等等,于是我们会想办法将这些共有的功能抽取成一个个公共组件,以便能够在不同的页面或业务中使用. 为什么需要封装table组件? 后台管理系统表格使用频率高,减少关于table的业务代码,且便于后期统一修改.便于后期维护.如给ta

随机推荐