如何构建基于vue-cli3的个人组件库

创建一个Vue-cli3项目

如何创建请参考：https://cli.vuejs.org/zh/

创建examples目录

将项目中src的文件夹名修改为examples，该文件夹用于存储组件库的示例。
因为修改了src的文件夹名，在构建时本应该打包src中的内容无法被正常打包了，所以我们要添加examples目录到webpack配置文件中。(后续段落介绍如何修改配置)

创建packages目录

该目录用于存储组件源代码。（需要配置到webpack中）
在packages目录下创建index.js
该文件用来注册所有的组件供Vue使用。
创建lib目录
该目录用于存储组件库打包后的代码

在根目录下创建vue.config.js 并打开

输入下面代码

const path = require('path')
module.exports = {
    pages: {
      index: {
        entry: 'examples/main.js',
        template: 'public/index.html',
        filename: 'index.html'
      }
    },
    chainWebpack: config => {
        config.resolve.alias
            .set('@', path.resolve('examples')) 
            .set('~', path.resolve('packages'));
        config.module
            .rule('eslint')
            .exclude.add(path.resolve('lib'))
            .end()
            .exclude.add(path.resolve('examples/docs'))
            .end();
        config.module
            .rule('js')
            .include.add(/packages/)
            .end()
            .include.add(/examples/)
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                return options;
            });
    }
}

写一个示例组件

packages新建目录badge
badge目录新建目录src
src目录新建main.vue文件
badge目录新建index.js用于导出组件

main.vue示例代码

<template>
    <div class="vu-badge">
      <slot></slot>
      <sup
        v-show="!hidden && (content || content === 0 || isDot)"
        v-text="content"
        class="vu-badge__content"
        :class="[
          'vu-badge__content--' + type,
          {
            'is-dot': isDot
          }
        ]">
      </sup>
    </div>
</template>

<script>
    export default {
        name: "VuBadge",
        props: {
          value: {},
          max: Number,
          isDot: {
            type: Boolean,
            default: false
          },
          hidden: {
            type: Boolean,
            default: false
          },
          type: {
            type: String,
            validator(val) {
              return ['success', 'warning', 'info', 'danger'].indexOf(val) > -1;
            }
          }
        },
        computed: {
          content() {
            if (this.isDot) return;

            const value = this.value;
            const max = this.max;

            if (typeof value === 'number' && typeof max === 'number') {
              return max < value ? `${max}+` : value;
            }

            return value;
          }
        }
    }
</script>

./badge/index.js 代码

 import Badge from './src/main';

/* istanbul ignore next */
Badge.install = function(Vue) {
  Vue.component(Badge.name, Badge);
};

export default Badge;

./packages/index.js代码

  import badge from './badge'

const components = [
    badge
]

const install = function (Vue) {
    if(install.installed) return
    components.map(component => Vue.component(component.name,component))
}

if (typeof window !== 'undefined' && window.Vue){
    install(window.Vue)
}

export default {
    install,
    badge
}

修改根目录package.json如下

{
  "name": "包名称",
  "version": "0.1.0",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name freeui --dest lib packages/index.js"
  },
  "main": "lib/包名称.common.js",
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
  }
}

编写示例

1、在main.js中导入组件库

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入组件库
import badge from './../packages/index'
// // 注册组件库
Vue.use(badge)


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2、在示例中使用组件库中的组件

    <template>
  	  <div>
        <vu-badge :value="88" class="item">
          评论
        </vu-badge>
    
        <vu-badge :value="200" :max="99" type="danger" class="item">
          消息
        </vu-badge>

        <vu-badge is-dot class="item">
          查询
        </vu-badge>
  	</div>
</template>
<style lang="scss" scoped>
  .item {
    margin-right: 20px;
  }
</style>

发布到 npm，方便直接在项目中引用

$npm login

Username: *****
Password: 
Email: (this IS public) ******
Logged in as *** on https://registry.npmjs.org/.

$npm publish