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

三拾老师

已于 2023-03-13 15:33:49 修改

阅读量4.2k

点赞数 1

文章标签： vue.js npm javascript vue elementui

于 2023-03-13 15:30:20 首次发布

本文链接：https://blog.csdn.net/qq_27244301/article/details/129493670

版权

一前言

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

二创建项目

npm init vite@latest

三创建步骤

提示我们要安装create-vite@4.1.0得依赖，选择y
起一个组件名字,然后我们选择vue
这里我选择的是javascript,然后回车
安装完成
因为我们需要了element-ui组件库，所以我们要手动安装一下依赖
```
npm install element-plus --save
```

四创建组件

首先，我们要在src目录下，创建一个package文件夹，
在package文件夹下创建.vue文件，（自定义名字）

封装我们要得组件

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

<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>

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

五导出组件

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 } // 批量的引入*

使用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'
        }
      }
    }
  }
})

修改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"
  }
}

六打包

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

打包，生成dist文件
```
npm run build
```
注册npm账号官网地址
- 想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到
- 有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下：
```
npm config set registry=https://registry.npmjs.org
```

发布前准备
在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"
}

添加npm用户
在dist目录下，运行命令
```
npm adduser
```
添加npm账号得用户名和密码还有邮箱地址
- Username 用户名
- Password 密码
- Email 邮箱地址
- Enter one-time password 验证码
执行发布命令
```
npm publish
```
出现如下就说明我们上传成功了，然后我们到我们的npm项目中查看结果

已经上传成功

七使用组件

当我们要在项目中使用的时候就复制npm i common-lyh
在这里插入图片描述
package.json文件中就有了我们安装的组件

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

在我们要用到得.vue中使用
在这里插入图片描述

总结

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

三拾老师

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
7
评论
vue3 + vite自定义封装vue + element-ui 表格组件，发布到npm包的全过程。

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

扫一扫