插件

问题：插件有什么好处？

可以一次性将插件安装到vue中的程序里面去，使用的时候use即可

使用

Vue.use在入口文件中执行

Vue.use(MyPlugin, { someOption: true });

开发

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyUI.install = function (vue, options) {
  Vue.component
}

注册

//全局注册
Vue.use(MyUI, {
  components: [
    'MyButton',
    'MyInput'
  ]
});

/**
 * 组件开发的install方法
 * @param {*} Vue vm实例
 * @param {*} options 组件对象
 */
MyUI.install = function (Vue, options) {
  //用户有输入组件代码时才执行
  if (options && options.components) {
    const components = options.components;
    // console.log(components);
    //['MyButton', 'MyInput']
    //遍历组件对象
    //获取组件对象里的组件名称
    components.forEach((componentName) => {
      //遍历组件池
      //获取自定义的组件对象
      COMPONENTS.forEach((component) => {
        // console.log(component);
        //{name: 'MyButton', props: {…}, _compiled: true, render: ƒ, …}
        //组件名称一致时说明找到该组件
        if (componentName === component.name) {
          //注册组件
          //Vue.component(组件名称, 组件对象)
          Vue.component(component.name, component);
        }
      });
    });
  } else {
    //用户没有有输入组件代码时才执行
    COMPONENTS.forEach((component) => {
      //注册组件
      Vue.component(component.name, component);
    });
  }
}

按需加载组件

入口文件导入

import {MyButton,MyInput} from './xxx';

Vue.use加载使用

Vue.use(MyButton);
Vue.use(MyInput);

在插件入口文件注册组件对象

//1.注册按需加载的组件对象
const MyButton = {};
const MyInput = {};
//2.导入组件对象
import Button from './Button';
import Input from './Input';
//3.分别给组件对象注册
MyButton.install = function (Vue) {
  Vue.component(Button.name, Button);
}
MyInput.install = function (Vue) {
  Vue.component(Input.name, Input);
}
//4.导出组件对象
export {
  MyButton,
  MyInput
}

my-UI

编写一个UI插件库

技术：vue2

//项目目录:

目前已经编写的UI组件有：

• button：按钮

  • 配置项：type="danger|warning|success|primary"
• input：输入框

• link：文字链接

  • 配置项：
  • herf="xxx"
  • type="danger|warning|success|primary"
  • target="_blank"

• select：下拉菜单

  • 配置项:data="[...]"

• stars：五星好评

  • 配置项:
  • num="3"
  • size="30"

• magnifier：放大镜

  • 配置项：
  • link="xxx"
  • blank="true"
  • imgAlt="model"
  • imgWidth="375"
  • imgHeight="481"
  • magWidth="100"
  • magHeight="100"
  • maginiferImgData="[...]"

• carousel：无缝轮播图

  • 配置项：
  • autoplay="true"
  • duration="3000"
  • initial="0"
  • hasDot="true"
  • hasDirector="true"
  • dotBgColor="orange"
  • autoplayDir="'prev'"
  • courouselImgData="[...]"

• tree-menu：树形左侧菜单

  • 配置项:
  • 用户提供的树状数组数据