Vue 开发插件

我们可以先查看Vue的插件的开发规范

我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入，就像这样：
// 这里注意一下包的名字前缀是 unisoft ，组件的名字前缀是 uni

    import UniSoftUI from 'unisoft-ui';
    // 或者 const CustomUI = require('unisoft-ui');
    // 或者 <script src="..."></script>
    Vue.use(UniSoftUI);

构建一个 Vue 项目

开发组件我们使用 webpack-simple 模板:

    vue init webpack-simple <project-name>

ps: 这里我选择了 use sass 因为之后开发组件会用到

目录结构如图:

├── src/                           // 源码目录
│   ├── packages/                  // 组件目录
│   │   ├── switch/                // 组件（以switch为例）
│   │   ├── moor-switch.vue        // 组件代码
│   │   ├── index.js               // 挂载插件
│   ├── App.vue                    // 页面入口
│   ├── main.js                    // 程序入口
│   ├── index.js                   // （所有）插件入口
├── index.html                     // 入口html文件

开发单个组件:

先看一下目标效果：

开始开发：
在 packages 文件夹下新建一个 switch 文件夹用来存放 switch 组件的源码，继续在 switch 文件夹中新建 uni-switch.vue 和 index.js 文件
uni-switch.vue 组件:

<template>
  <div class="uni-switch">
    <div class="wrapper">
      <span><slot></slot></span>
      <div :class="[{closed: !checked}, 'switch-box']"
           @click="handleChange(value)">
        <span :class="{closed: !checked}"></span>
      </div>

      <input
        type="checkbox"
        @change="handleChange"
        :true-value="activeValue"
        :false-value="inactiveValue"
        :disabled="disabled"
        :value="value"/>
    </div>
  </div>

</template>

<script>
  export default {
    name: "UniSwitch",
    data() {
      return {}
    },
    props: {
      value: {
        type: [Boolean, String, Number],
        default: false
      },
      activeValue: {
        type: [Boolean, String, Number],
        default: true
      },
      inactiveValue: {
        type: [Boolean, String, Number],
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      checked() {
        return this.value === this.activeValue;
      }
    },
    methods: {
      handleChange(value) {
        this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
      }
    }
  }
</script>

index.js:

//  UniSwitch 是对应组件的名字，要记得在 moor-switch.vue 文件中还是 name 属性哦
import UniSwitch from './UniSwitch.vue';
UniSwitch.install = Vue => Vue.component(UniSwitch.name, UniSwitch);
export default UniSwitch;

好了基本完成了，但是为了将所有的组件集中起来比如我还有 select、 input、 button 等组件，那么我想要统一将他们放在一个文件这中便于管理

所以在 App.vue 同级目录我新建了一个 index.js 文件

import UniSwitch from './packages/switch/index';
import UniSlider from './packages/slider/index';
import UniNumberGrow from './packages/number-grow/index';
import './common/scss/reset.css'
// ...如果还有的话继续添加

const components = [
  UniSwitch,
  UniSlider,
  UniNumberGrow
  // ...如果还有的话继续添加
]

const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component);
  })
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  UniSwitch,
  UniSlider,
  UniNumberGrow
  // ...如果还有的话继续添加
}

好了到这里我们的组件就开发完成了；下面开始说怎么打包发布到 npm 上