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

一 前言

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

二 创建项目

npm init vite@latest

三 创建步骤

1. 提示我们要安装[email protected]得依赖，选择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"/>
                     </div>
                   </template>
                   <template v-else-if="column.label === '操作'" v-hasPermi="['anno:image:deletedevops'] && deletedevops">
                     <el-button v-for="(item, index) in buttons" :key="index" :type="item.type"
                       @click="$emit('commonDel', scope.row)" @keyup.prevent @keydown.enter.prevent>
                       {{ item.text }}
                     </el-button>
                   </template>
                   <template v-else-if="column.label === '操作'" v-hasPermi="['anno:image:updatemark'] && updatemark">
                     <el-button v-for="(item, index) in buttons" :key="index" :type="item.type"
                       @click="$emit('commonDel', scope.row)" @keyup.prevent @keydown.enter.prevent>
                       {{ item.text }}
                     </el-button>
                   </template>
                 </template>
               </el-table-column>
             </template>
           </el-table>
         </div>
       </section>
     </template>
     <script setup>
     const emit = defineEmits()
     const prop = defineProps({
       name: 'common-table',
       tableData: {
         type: Array
       },
       column: {
         type: Array
       },
       buttons: {
         type: Array
       },
       deveops: {
         type: Boolean
       },
       deletedevops: {
         type: String
       },
       updatemark: {
         type: String
       }
     })
     // 表格多选
     const commonSelect = (row) => {
       emit("commonRows", row)
     }
     </script>
     <style lang="scss" scoped>
     .overview {
       display: inline-block;
     }
     
     .overview img {
       max-width: 100px;
       height: auto;
       max-height: 60px;
     }
     </style>
   

4. 我们可以把我们创建的好的组件，找一个文件引入测试一下，确保我们的代码没有问题，这里我就不展示了。

五 导出组件

1. src 根目录中创建index.js文件，代码如下：

   import commonTable from "./package/commonTable/commonTable.vue"; // 引入封装好的组件
   export { commonTable } //实现按需引入*
   const coms = [commonTable]; // 将来如果有其它组件,都可以写到这个数组里
   
   const components = [TestBtn];
   const install = function(App, options) {
     components.forEach((component) => {
       App.component(component.name,component);
     });
   };
   export default { install } // 批量的引入*
   

2. 使用vite构建
   编辑vite.config.js文件,新增build属性 vite中文文档

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import path from 'path'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue()],
     build: {
       lib: {
         entry: path.resolve(__dirname, 'src/index.js'),
         name: 'commonTable',
         fileName: (format) => `common-table.${format}.js`
       },
       rollupOptions: {
         // 确保外部化处理那些你不想打包进库的依赖
         external: ['vue'],
         output: {
           // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
           globals: {
             vue: 'Vue'
           }
         }
       }
     }
   })
   

3. 修改package.json文件

   {
     "name": "common-lyh",
     "private": true,
     "version": "0.0.1",
     "type": "module",
     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "preview": "vite preview"
     },
     "files": ["dist"],
     "main": "./dist/test-btn.umd.js",
     "module": "./dist/test-btn.es.js",
     "exports": {
       ".": {
         "import": "./dist/test-btn.es.js",
         "require": "./dist/test-btn.umd.js"
     }
   },
     "dependencies": {
       "vue": "^3.2.45"
     },
     "devDependencies": {
       "@vitejs/plugin-vue": "^4.0.0",
       "less": "^4.1.3",
       "sass": "^1.58.3",
       "vite": "^4.1.0"
     }
   }
   

六 打包

当我们都配置好以后，我们就要打包了，这是我们要上传得文件

1. 打包，生成dist文件

   npm run build
   

   

2. 注册npm账号 官网地址

   • 想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到
   • 有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下：

     npm config set registry=https://registry.npmjs.org
     

3. 发布前准备
   在dist文件生成package.json文件，自定义组件名(唯一，重名报错重新起一个就行),版本号每次上传要高于前一次版本号
   在dist根目录中运行：

   npm init -y
   

   {
     "name": "common-lyh",
     "version": "1.0.1",
     "description": "",
     "main": "common-table.es.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",
     "license": "ISC"
   }
   

4. 添加npm用户
   在dist目录下，运行命令

   npm adduser
   

   添加npm账号得用户名和密码还有邮箱地址

   • Username 用户名
   • Password 密码
   • Email 邮箱地址
   • Enter one-time password 验证码
     

5. 执行发布命令

   npm publish
   

   出现如下就说明我们上传成功了，然后我们到我们的npm项目中查看结果
   
   已经上传成功
   

七 使用组件

当我们要在项目中使用的时候就复制npm i common-lyh

package.json文件中就有了我们安装的组件

这个时候只要像element ui 那样引入就可以全局使用了，在main.js中引入

在我们要用到得.vue中使用

总结

到这里我们的组件就封装并上传好了，可以随时通过npm下载并使用。