vue3 + vite自定义封装vue + element-ui 表格组件，发布到npm包的全过程。

一 前言

当我们项目中用到的表格太多的话，就会导致我们的代码量一直增加，所以我们要封装一个公共得组件，通过传参引入来使用，下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下。

二 创建项目

npm init vite@latest

三 创建步骤

1. 提示我们要安装create-vite@4.1.0得依赖，选择y
   

2. 起一个组件名字,然后我们选择vue
   

3. 这里我选择的是javascript,然后回车
   

4. 安装完成
   

5. 因为我们需要了element-ui组件库，所以我们要手动安装一下依赖

   npm install element-plus --save
   

四 创建组件

1. 首先，我们要在src目录下，创建一个package文件夹，
   

2. 在package文件夹下创建.vue文件，（自定义名字）
   

3. 封装我们要得组件

   这里面得内容我就不过多讲解了，有不懂的小伙伴可以问我。

   <template>
       <section>
         <div class="common-table">
           <el-table :data="tableData" stripe style="width: 100%" @selection-change="commonSelect">
             <el-table-column type="selection" width="55" v-hasPermi="['anno:image:transmission']" v-if="deveops === true">
             </el-table-column>
             <template v-for="column in column">
               <el-table-column :width="column.width ? column.width : 'auto'" :prop="column.prop" :label="column.label">
                 <template #default="scope">
                   <slot v-if="column.imageId" :name="column.prop" :row="scope.row">
                   </slot>
                   <template v-else-if="column.prop === 'imagePreview'">
                     <div class="overview">
                       <common-errimg :srcImg="scope.row.thumbUrl"