1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

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

       更新时间2019年02月28日 15:16:38   作者天微蔚蓝   我要评论

      这篇文章主要给大家介绍了关于Vue插件从封装到发布的完整步骤文中通过示例代码介绍的非常详细对大家的学习或者工作具有一定的参考学习价值需要的朋友们下面来一起学习学习吧

      插件的分类

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

      插件的使用

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

      // 调用 `MyPlugin.install(Vue)`
      Vue.use(MyPlugin)
      
      new Vue({
       //... options
      })```
      
      也可?#28304;?#20837;一个选项对象
      ``` 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参数具体自?#33322;?#34892;封装

      从零开始的组件封装

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

      准备

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

      创建工程

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

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

      开发目录如下:

      插件实现

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

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

      这里我们可以将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依赖?#23548;?#24341;入的文件 相当于入口
       "repository": {// 仓库 ?#33756;?#20179;库内容也不影响发布内容填对就行
        "type": "git",
        "url": "https://github.com/icebluesky2666/weibo-emoji"
       },
       "description": "A Weibo emoji plugn",// 描述
       "version": "1.0.2",// 版本
       "author": "jhqin",// 作者
       "license": "MIT",// license 类型

      对于多次发布必须?#30475;?#30340;版本号都不同

      最后

       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 (本地下载)

      总结

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

      相关文章

      • ?#31243;vue首屏加载优化

        ?#31243;vue首屏加载优化

        这篇文章主要介绍了?#31243;vue首屏加载优化小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
        2018-06-06
      • Element输入框带历史查询记录的实现示例

        Element输入框带历史查询记录的实现示例

        这篇文章主要介绍了Element输入框带历史查询记录的实现示例,小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
        2019-01-01
      • Vue.js框架路由使用方法实例详解

        Vue.js框架路由使用方法实例详解

        这篇文章主要介绍了Vue.js框架路由使用方法实例详解的相关资料,这里提供实例帮助大家学习理解这部分内容需要的朋友可以参考下
        2017-08-08
      • vue用Object.defineProperty?#20013;?#19968;个简单的双向绑定的示例

        vue用Object.defineProperty?#20013;?#19968;个简单的双向绑定的示例

        这篇文章主要介绍了用Object.defineProperty?#20013;?#19968;个简单的双向绑定的示例小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
        2018-07-07
      • vue实现循?#38750;谢?#21160;画

        vue实现循?#38750;谢?#21160;画

        这篇文章主要为大家详细介绍了vue实现循?#38750;谢?#21160;画具有一定的参考价值?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
        2018-10-10
      • vue.js select下拉框绑定和取值方法

        vue.js select下拉框绑定和取值方法

        下面小编就为大家分享一篇vue.js select下拉框绑定和取值方法具有很好的参考价值希望对大家有所帮助一起跟随小编过来看看吧
        2018-03-03
      • Vue.js实现开发购物车功能的方法详解

        Vue.js实现开发购物车功能的方法详解

        这篇文章主要介绍了Vue.js实现开发购物车功能的方法,结合实例形式分析了基于vue.js开发的购物车功能相关操作步骤与实现?#35760;?需要的朋友可以参考下
        2019-02-02
      • vue-router3.0版本中 router.push 不能刷新页面的问题

        vue-router3.0版本中 router.push 不能刷新页面的问题

        这篇文章主要介绍了vue-router3.0版本中 router.push 不能刷新页面的问题,小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
        2018-05-05
      • 在Vue.js中使用Mixins的方法

        在Vue.js中使用Mixins的方法

        本篇文章主要介绍了在Vue.js中使用Mixins的方法Vue的Mixins是非常实用的编程方式可以使代码变得容易理解有兴趣的一起来了解一下
        2017-09-09
      • vue实现nav导航栏的方法

        vue实现nav导航栏的方法

        这篇文章主要为大家详细介绍了vue项目nav导航栏的实现方法具有一定的参考价值?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
        2017-12-12

      最新评论

      3dԻв

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>