vue-cli element 二次封装组件，在npm上发布自己的vue组件库，使用npm install 或 script的方式引用

一、vue-cli 生成项目，安装element-ui

vue create projectName
cd projectName
npm install element

二、在src 目录下，新建lib目录及相关文件，且修改配置文件

 

    1、./lib/index.js 文件

import SzrTable from './szr-table/index.js'

// 存储组件列表
const components = [
    SzrTable
]
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,
  SzrTable
}

    2、./lib/szr-table/index.js

import SzrTable from './SzrTable.vue'

SzrTable.install = function (Vue) {
  console.log(SzrTable.name)
  Vue.component(SzrTable.name, SzrTable)
}

export default SzrTable

    3、./lib/szr-table/SzrTable.vue

<!--
 * @Description: 
 * @Author: xihong
 * @Date: 2019-09-17 09:55:12
 * @LastEditors: xihong
 * @LastEditTime: 2019-10-28 15:05:54
 -->
<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="isShowCheckbox"
        type="selection"
        width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
        v-if="isShowOrder"
      >
      </el-table-column>
      <el-table-column
        v-for="(type,index) in tableType"
        :prop="type.prop"
        :label="type.label"
        :min-width="type.width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        fixed="right"
        align="center"
        v-if="btnType"
      >
        <template slot-scope="scope">
          <el-button
            type="success"
            plain
            size="small"
            @click="editTable(scope.row)"
          >编辑</el-button>
          <el-button
            type="danger"
            plain
            size="small"
            @click="deleteTable(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script lang="ts">
export default {
    name: "szr-table",
    props: ['btnType', 'tableType','isShowCheckbox','tableData','isShowOrder'],
    methods:{
      handleSelectionChange(val){
      this.$emit("handle-selection-change",val)
    },
    editTable(val){
      this.$emit("edit-table",val)
    },
    deleteTable(val){
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        this.$emit("delete-table", val);
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
        return;
      });
    }
    }
}
</script>

<style scoped lang="stylus">
.pageContainer {
  margin: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>

    4、package.json 文件

{
  "name": "szrpubliccomponent",
  "version": "0.6.0",
  "private": false,
   // 引用的文件名称
  "main": "lib/index.umd.js",
  "directories": {
    "dist": "dist"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
     // 打包的文件  --name打包后的文件名称  --dest 打包文件所在的文件夹名称
    "build-bundle": "vue-cli-service build --target lib --name index --dest lib ./src/lib/index.js"
  },
  "dependencies": {
    "core-js": "^3.3.2",
    "element-ui": "^2.12.0",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "vue-template-compiler": "^2.6.10"
  }
}

 三、生成文件，打包上线

npm run build-bundle

// 没有npm ,在官网上注册一个
npm login  // 根据提示输入相关信息
npm publish  // 每次发布的版本号需要不一致

 四、包的使用   

    1、npm install szrpublliccomponent，再如下面的方式使用

<template>
  <div id="app">
    <szr-table
      :tableData="tableData"
      :tableType="tableType"
      :isShowCheckbox="true"
      :isShowPagination="true"
      btnType="jsj"
    ></szr-table>
  </div>
</template>
<style lang="stylus"></style>
<script lang="ts">

export default {
  name: "App",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      tableType: [
        {
          prop: "date",
          label: "日期",
          width: "150"
        },
        {
          prop: "name",
          label: "姓名",
          width: "100"
        },
        {
          prop: "address",
          label: "地址",
          width: "300"
        }
      ]
    };
  }
};
</script>
<style lang="stylus">
$colorGray = rgb(84, 92, 100);
$colorWhite = #FFF;
$colorLightGray = #dadada;

* {
  margin: 0;
  padding: 0;
  font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

html, body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: #FFF;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.active {
  color: #FFF !important;
  background-color: #409EFF !important;
  border-color: #409EFF !important;

  .el-icon-close {
    color: #FFF !important;
  }
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

.el-header {
  background-color: $colorGray;
  color: $colorWhite;
  text-align: center;
  line-height: 60px;
  width: 100%;
  z-index: 7;
  position: fixed;
  left: 0;
  top: 0;
}

.el-aside {
  background-color: $colorGray;
  color: $colorWhite;
  text-align: center;
}

.el-menu {
  border-right-width: 0 !important;
}

.el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.fontsize26 {
  font-size: 26px;
  color: $colorLightGray;
}

.fontsize22 {
  font-size: 22px;
  color: $colorLightGray;
  margin-right: 8px;
}

.header {
  display: flex;
  justify-content: flex-end;
  text-align: right;

  .menuBtn {
    width: 180px;
  }

  .userBtn {
    flex: 1;
  }
}

.menuMarginTop {
  margin-top: 60px !important;
}

@media (max-width: 768px) {
  .el-container {
    display: block !important;
  }

  .mainMarginTop {
    margin-top: 0px !important;
  }

  .navMenu {
    width: 100% !important;
  }

  .header {
    .menuBtn {
      width: auto;
    }
  }

  .el-message-box {
    width: 70% !important;
  }
}

@media (min-width: 768px) {
  .el-container {
    height: 100vh;
    display: flex !important;
  }

  .mainMarginTop {
    margin-top: 60px !important;
  }

  .navMenu {
    width: 200px !important;
    min-height: 100vh;
  }

  .el-message-box {
    width: 45% !important;
  }
}
</style>

     2、script 引用方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/szrpubliccomponent@0.6.0/lib/index.css">
</head>
<body>
<div id="app">
    <szr-table
        :table-data="tableData"   // 属性大写的字符需要改成小写，且用‘-’连接（例如 ： tableData 写为 table-data）
        :table-type="tableType"
        :is-show-checkbox="true"
        :is-show-pagination="true"
        :btn-type="true"
        @handle-selection-change="handleSelectionChange($event)"
        @edit-table="editTable($event)"
        @delete-table="deleteTable($event)"
    ></szr-table>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/szrpubliccomponent@0.6.0/lib/index.umd.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [
                    {
                        date: "2016-05-02",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1518 弄"
                    },
                    {
                        date: "2016-05-04",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1517 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1516 弄"
                    }
                ],
                tableType: [
                    {
                        prop: "date",
                        label: "日期",
                        width: "150"
                    },
                    {
                        prop: "name",
                        label: "姓名",
                        width: "100"
                    },
                    {
                        prop: "address",
                        label: "地址",
                        width: "300"
                    }
                ],
                multipleSelection:[]
            }
        },
        created(){
            console.log(this.tableData)
        },
        methods:{
            handleSelectionChange(val){
                console.log(val)
            },
            editTable(row){
                console.log(row)
            },
            deleteTable(row){
                console.log(row)
            }
        }
    })
</script>
</html>