Vue插件从封装到发布

栏目: 编程语言 · 发布时间: 2年前

来源: juejin.im

内容简介:通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成:Vue.js 的插件有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:其实无论采用什么方式,最终的目的则是在项目中可以使用,借助install 的Vue参数具体自己进行封装

本文转载自:https://juejin.im/post/5c763f56f265da2db27943ef,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

  • 添加全局的方法或者属性 比如: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

开发目录如下:

Vue插件从封装到发布

插件实现

项目具体逻辑实现可以去 这里 查看源码 我们正常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 
复制代码

发布

  1. 发布之前检查一下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 //打包未定义的时候使用默认名字
    },
复制代码
  1. 检查发布配置:
"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 类型
复制代码

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

  1. 最后:
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>
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++程序设计原理与实践

C++程序设计原理与实践

(美)Bjarne Stroustrup / 王刚 等 / 机械工业出版社 / 2010.7 / 108.00元

本书是经典程序设计思想与C++开发实践的完美结合,是C++之父回归校园后对C++编程原理和技巧的全新阐述。书中全面地介绍了程序设计基本原理,包括基本概念、设计和编程技术、语言特性以及标准库等,教你学会如何编写具有输入、输出、计算以及简单图形显示等功能的程序。此外,本书通过对C++思想和历史的讨论、对经典实例(如矩阵运算、文本处理、测试以及嵌入式系统程序设计)的展示,以及对C语言的简单描述,为你呈现......一起来看看 《C++程序设计原理与实践》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具