Плагин Vue от упаковки до публикации

Vue.js

Классификация плагинов

  • Добавить глобальные методы или свойства, такие как: Vue-Element
  • Добавьте глобальные ресурсы, такие как: инструкция v-bind
  • некоторые примеси добавлены с помощью методов примесей
  • Добавьте метод экземпляра Vue над Vue.prototype

Использование плагинов

Плагины используются через глобальный метод Vue.use(). Это нужно сделать до того, как вы вызовете новый Vue() для запуска приложения:

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

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

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

Разработка плагина

Плагин Vue.js имеет общедоступный метод установки. Первым параметром этого метода является конструктор 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();
}

На самом деле, какой бы метод ни использовался, конечной целью является его использование в проекте, и инкапсуляция его сама по себе с помощью параметра Vue установки

Упаковка компонентов с нуля

Требования: инкапсулировать плагин enoji для смайликов Weibo.

Подготовить

среда узла среда vue среда vue-cli строительные леса и т. д.

Создать проект

Используйте vue init для создания простых каркасов, а простая модификация может подойти для разработки плагинов.

vue init webpack-simple weibo-emoji

cd weibo-emoji

npm install

Каталог разработки выглядит следующим образом:

项目目录

Реализация плагина

Конкретная логическая реализация проекта может перейти кздесьПосмотреть исходный код Наша обычная запись веб-пакета обычно имеет значение main.js для выполнения некоторых операций, таких как введение зависимостей и монтирование представления. Когда мы пишем плагин, само собой разумеется, что этот шаг монтирования будет опущен. Здесь мы можем использовать index.js в качестве нашего входного файла, и то, что выставлено, является объектом плагина с этим методом установки. код показывает, как показано ниже:

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

использовать

npm install weibo-emoji
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

Из-за опыта, если есть какие-либо ошибки, пожалуйста, поправьте меня!

Категории