Vuejs, о котором вы могли не знать - разработка плагинов

Vue.js
Vuejs, о котором вы могли не знать - разработка плагинов

by yugasun from yugasun.com/post/there-ma…Эта статья может быть воспроизведена полностью, но должны быть сохранены первоначальный автор и источник.

Примитивный плагин

Несмотря на то, что Vue.js достаточно мощен, в реальной разработке нам все еще нужно вводить различные модули для достижения наших функциональных требований или добавлять некоторые глобальные функции к глобальному объекту Vue, и Vue插件Он здесь, чтобы помочь нам сделать это.

разработать плагин

Объем плагинов Vuejs не ограничен, как правило, существуют следующие типы:

  1. Добавьте глобальные методы или свойства, например:vue-custom-element
  2. Добавляйте глобальные ресурсы: директивы, фильтры, переходы и т. д., такие как:vue-touch
  3. Добавьте некоторые параметры компонента с помощью глобальных методов миксина, таких как:vue-router
  4. Добавьте методы экземпляра Vue, добавив их вVue.prototypeпонял выше.
  5. Библиотека, которая предоставляет собственный API, предоставляя при этом одну или несколько функций, упомянутых выше, например:vue-router

Плагины Vuejs должны иметь общедоступный методinstall, первый параметр этого методаVueКонструктор, второй параметр — необязательный объект конфигурации, способ написания такой:

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

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

  // 3. 注入通用方法或属性给组件
  Vue.mixin({
    data(){
      return {
        // 通用数据,
      };
    },
    created() {
      // 逻辑
    },
  });

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

Используйте плагины

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

import Vue from 'vue';
import MyPlugin from './MyPlugin';
Vue.use(MyPlugin, {someOption: true});

компоненты разработки

мы здесь сvue-axios-pluginНапример, это параaxiosПлагин второго пакета удобно проходить непосредственно в проекте.this.$http.get/postдля прямого вызова метода запроса.

Сначала создайте файл записи на основе приведенного выше шаблона.vue-axios-plugin.js:

const VueAxiosPlugin = {}
VueAxiosPlugin.install = (Vue, options) => {

}
export default VueAxiosPlugin

Затем добавьте методы экземпляра в Vue:

import axios from 'axios'
const VueAxiosPlugin = {}
VueAxiosPlugin.install = (Vue, options) => {
  const service = axios.create(options)
  Vue.prototype.$axios = service
  Vue.prototype.$http = {
    get: (url, data, options) => {
      let axiosOpt = {
        ...options,
        ...{
          method: 'get',
          url: url,
          params: data
        }
      }
      return service(axiosOpt);
    },
    post: (url, data, options) => {
      let axiosOpt = {
        ...options,
        ...{
          method: 'post',
          url: url,
          data: data
        }
      }
      return service(axiosOpt);
    }
  }
}
export default VueAxiosPlugin

Для конкретного использования axios, пожалуйста, прочитайте официальную документацию.axios

Теперь, когда базовая разработка плагина завершена, протестируйте его в проекте:

import VueAxiosPlugin from './vue-axios-plugin'
Vue.use(VueAxiosPlugin)

Затем вы можете использовать добавленный глобальный метод непосредственно в вашем компоненте:

 var app = new Vue({
  el: '#app',
  data: {
    content: 'Sending...'
  },
  methods: {
    getUserInfo() {
      Promise.all([
        this.$http.get('http://yapi.demo.qunar.com/mock/5802/user', { id: 1 }),
        this.$http.post('http://yapi.demo.qunar.com/mock/5802/user', {
          username: 'yugasun',
        }, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
      ]).then((res) => {
        console.log(res)
      }).catch((e) => {
        console.log(e)
      })
    }
  },
  created() {
    this.getUserInfo()
  }
})

публиковать компоненты

Плагин написан, вы можете скопировать файл и повторно использовать его в разных проектах. Если вы чувствуете, что копировать файл каждый раз хлопотно, вы можете прочитать предыдущую статью поПользовательские шаблоны проектов разработкистатьи вы можете добавить файл плагина прямо в шаблон проекта. Конечно, если ваш плагин достаточно хорош, вы также можете опубликовать его в сообществе npm, чтобы им могли пользоваться другие программисты по всему миру.

Каждый раз, когда проект срочный и есть требование, с которым трудно справиться, мы будем думать о поиске нужного нам проекта на github, Поскольку мы получили так много от сообщества, конечно, мы должны научиться быть благодарными, и время от времени пытаться отплатить, не спрашивайте, насколько высокое качество кода, даже если он просто помогает исправить ошибку в документации, это тоже вклад.Может быть, ваша модификация может помочь другим сэкономить полдня времени. Любой проект растет в постоянных итерациях.

Всегда добро пожаловать на крупнейший в мире сайт гей-знакомствGayGithubВнесите свой первый исходный код ~

Исходный код здесь

Тематический каталог

You-May-Not-Know-Vuejs

Категории