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 (本地下载)
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
vue封装第三方插件并发布到npm的方法
前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心. gitment gitment是一个基于github issues封装的评论插件,以这个插件作为演示,把它封装成vue插件.vue-gitment,该插件已发布到npm,并在自己的开源项目vueblog中安装使用 项目初始化 封装vue的插件用
-
Vue封装的可编辑表格插件方法
可任意合并表头,实现单元格编辑. 页面效果如图: 页面使用如下: <template> <div> <v-table :datat = "tableData" :thlabel="thlabel" :isEdit="true"> </v-table> </div> </template> <script> export default{ data(){ retur
-
用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插件从封装到发布
前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue-area-select 欢迎指正 准备 Vue官网插件部分的介绍虽然很简单,但是还是好好刷一遍的.由于此插件较为简单,主要用到以下两个点: 1 . Vue的插件需要有一个公开方法install 2 . 通过全局方法 Vue.use() 使用插件,在下文有栗子 创建工程 初始化工程 vue
-
vue移动端微信授权登录插件封装的实例
1.新建wechatAuth.js文件 const queryString = require('query-string') //应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称.性别.所在地.并且,即使在未关注的情况下,只要用户授权,也能获取其信息) const SCOPES = ['snsapi_base', 'snsapi_userinfo'] class VueWe
-
Vue二次封装axios为插件使用详解
照例先贴上 axios的 gitHub 地址 不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说: 基本的封装要求: 统一 url 配置 统一 api 请求 request (请求)拦截器,例如:带上token等,设置请求头 response (响应)拦截器,例如:统一错误处理,页面重
-
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插件从封装到发布的完整步骤记录
插件的分类 添加全局的方法或者属性 比如:vue-element 添加全局的资源 比如:指令 v-bind 通过mixin方法添加的一些混合 添加Vue实例方法 Vue.prototype上面 插件的使用 通过全局方法 Vue.use() 使用插件.它需要在你调用 new Vue() 启动应用之前完成: // 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) new Vue({ //... options })``` 也可以传入一个选项对象: ``` ja
-
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组件的完整步骤记录
目录 实现思路: 步骤一:TabBar和TabBarItem的组件封装 步骤二:给TabBarItem传入active图片 步骤三:TabBarItem和路由的结合效果 步骤四:TabBarItem的颜色控制 用字体图标实现 引入字体图标 运用 总结 实现思路: 步骤一:TabBar和TabBarItem的组件封装 做到这,可以发现页面的基本布局已经实现了,但是item的点击活跃状态还没实现 步骤二:给TabBarItem传入active图片 为了防止替换的内容直接整个替换掉插槽,从而插槽上定义
-
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组件从开发到打包发布流程,并配置Github主页. 本文以 vue-clock2 组件为例,欢迎star _~~ 项目地址 目标框架:vue 打包工具:webpack 发布源:npm
-
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组件的完整步骤记录
目录 前言 为什么需要封装table组件? 第一步:定义通用组件 第二步:父组件与子组件进行render通信 第三步:使用组件 总结 前言 随着业务的发展和功能的增多,我们发现不少页面都具备相似的功能,这里举几个比较俗的例子:可以多选的下拉菜单,带输入的对话框,日期选择器等等,于是我们会想办法将这些共有的功能抽取成一个个公共组件,以便能够在不同的页面或业务中使用. 为什么需要封装table组件? 后台管理系统表格使用频率高,减少关于table的业务代码,且便于后期统一修改.便于后期维护.如给ta