如何封装VUE组件库？

之前一直在使用Angular开发项目，也封装过Angular组件。由于种种原因，现需要转战VUE。好在本人有扎实的实战经验，结合各位网络大神整理的经验，现总结一篇关于封装VUE组件库的文章教程。

现在前后端分离已经非常的流行了，一家公司无论选择使用Angular，还是VUE开发项目，往往都会选择封装一套自有的前端UI组件库，方便在多个项目中复用，节省开发周期。

这里所谓的前端UI组件库就是要支持 import、require 或者直接使用 script 标签的形式引入 ，方便多个项目复用。

PS：写一套名为ZERO-UI的组件库，组件的前缀使用ZOI。

首先，创建一个VUE工程（或者说项目）。 开发组件我们使用 webpack-simple 模板:

vue init webpack-simple <project-name>

PS：project-name为组件库名，在本教程中为zero-ui

工程创建好之后，我们先简单的开发一个switch组件。

在 packages 文件夹下新建一个 switch 文件夹用来存放 switch 组件的源码，继续在 switch 文件夹中新建 zoi-switch.vue 和 index.js 文件 。

zoi-switch.vue 组件:

<template>
  <div class="zoi-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: "ZoiSwitch",
    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

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

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

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

import ZoiSwitch from './packages/switch/index';
import './common/scss/reset.css'
// ...如果还有的话继续添加

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

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,
  ZoiSwitch,
  // ...如果还有的话继续添加
}

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

打包之前，首先我们需要改一下 webpack.config.js 这个文件;

// ... 此处省略代码
const NODE_ENV = process.env.NODE_ENV
module.exports = {
  // 根据不同的执行环境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
  output: {
    // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'zero-ui.js',
    library: 'zero-ui', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  // ... 此处省略代码
}

然后, 再修改package.json 文件:

// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 import zero-ui 的时候它会去检索的路径
"main": "dist/zero-ui.js",

发布命令只有两步骤:

npm login   // 登陆
npm publish // 发布

完成之后我们就可以在项目中安装使用了 。

在自己的项目中使用zero-ui, 先从 npm 安装

npm install zero-ui -S

在 mian.js 中引入 :

import ZEROUI from 'zero-ui'
Vue.use(ZEROUI)

在组件中使用:

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <zoi-switch v-model="isSwitch">
      <span class="text">{{switchText}}</span>
    </zoi-switch>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: 'welecom to zero-ui',
        isSwitch: false,
      }
    },
    computed: {
      switchText() {
        return this.isSwitch ? '开' : '关';
      }
    },
  }
</script>