基于element ui 进行组件库的封装

一、创建工程

vue create vt-ui

二、对vue 工程改造

1、创建packages 用于存储自定义组件的原代码

2、 将原有的src 目录改成 examples ，用于测试packages 下的组件

3、整个项目目录结构如下

三、在packages目录下创建组件

（1）创建table 组件

<template>
  <div class="vt-table">
    <div class="vt-table-header">
      <div class="table-header-left">
        <template v-for="(item, index) in btns">
          <!-- 新增按钮 -->
          <el-button
            v-if="item.type == 'add'"
            :type="item.type == 'add' ? 'primary' : 'primary'"
            size="small"
            :key="index"
            @click="tableClick(item.type)"
            >{
  { item.name ? item.name : "新增" }}</el-button
          >
          <!-- 编辑按钮 -->
          <el-button
            v-else-if="item.type == 'edit'"
            :type="item.type == 'edit' ? 'success' : 'primary'"
            size="small"
            :key="index"
            @click="tableClick(item.type)"
            >{
  { item.name ? item.name : "编辑" }}</el-button
          >
          <!-- 删除按钮 -->
          <el-button
            v-else-if="item.type == 'delete'"
            :type="item.type == 'delete' ? 'danger' : 'primary'"
            size="small"
            :key="index"
            @click="tableClick(item.type)"
            >{
  { item.name ? item.name : "删除" }}</el-button
          >
          <!-- 导入按钮 -->
          &l