使用vue2从零开始搭建自己的组件库（完整版）

//  lib/index.js
import Demo from './demo';
import Card from './card';

const components = {
  Demo,
  Card
}

const install = function(Vue){
  if(install.installed) return;
  Object.keys(components).forEach(key =>{
    Vue.component(components[key].name,components[key])
  })
}

const API = {
  install
}
export default API;

export {
  Demo,
  Card
}

<template>
  <div class="m-card" :style="width ? {width: width + 'px'} : {}">
    <div class="m-card-img" :style="imgHeight? {height:imgHeight+'px'}:{}">
        <img :src="imgSrc" alt="img" />
    </div>
    <div class="m-card-summary" v-if="summary">
      {{summary}}
    </div>
    <div v-else class="m-card-summary">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
    name:'m-card',
    props: {
      width: { //卡片宽度
        type:Number,
        default:0
      },
      imgSrc: { //卡片图片资源
        type:String,
        default:''
      },
      imgHeight: { //图片高度
        type:Number,
        default:0
      },
      summary: { //卡片概要
        type:String,
        default:''
      },
    }
}
</script>
<style>
</style>

import Card from './src/main.vue'
Card.install = function(Vue) {
    Vue.component(Card.name,Card)
}
export default Card

<template>
  <div id="app">
    <m-card
     imgSrc="logo.png"
     summary="这是一个自定义组件"
    >
    <template v-slot:footer>
      <div class="footer">
        <div class="left">哈哈哈哈</div>
        <div class="right">嘿嘿嘿嘿</div>
      </div>
    </template>
    </m-card>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
<template>
  <div id="app">
    <m-card
     imgSrc="logo.png"
     summary="这是一个自定义组件"
    >
    <template v-slot:footer>
      <div class="footer">
        <div class="left">哈哈哈哈</div>
        <div class="right">嘿嘿嘿嘿</div>
      </div>
    </template>
    </m-card>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const glob = require('glob')
const list = {}
async function makeList(dirPath,list){
    const files = glob.sync(`${dirPath}/**/index.js`)
    for(let file of files) {
        const component = file.split(/[/.]/)[2]
        list[component] = `./${file}`
    }
}
makeList('components/lib',list)
module.exports = {
  entry:list,
  mode:'development',
  output: {
      filename:'[name].umd.js',
      path:path.resolve(__dirname,'dist'),
      library:'rui',
      libraryTarget:'umd'
  },
  plugins: [
      new VueLoaderPlugin()
  ],
  module:{
      rules: [
          {
              test:/\.vue$/,
              use: [
                  {
                      loader: 'vue-loader'
                  }
              ]
          },
          {test:/\.css$/, use: ['css-loader']},
          {test:/\.scss$/, use: ['css-loader','sass-loader',]},
          {test:/\.(jpg|png|gif|bmp|jpeg)$/, loader: 'url-loader'},
          {test:/\.(ttf|eot|svg|woff|woff2)$/,use: 'url-loader'}
      ]
  }
}