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

怼烎@ 2023-09-24 23:30 17阅读 0赞

### 一 前言 ###

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

### 二 创建项目 ###

npm init vite@latest

### 三 创建步骤 ###

1.  提示我们要安装`create-vite@4.1.0`得依赖，选择`y`  
    ![55f6a6e59abc439d9ab97a44c2a93c69.png][]
2.  起一个组件名字,然后我们选择`vue`  
    ![在这里插入图片描述][961fffce7cb949cc872d68c4719074d4.png]
3.  这里我选择的是`javascript`,然后回车  
    ![在这里插入图片描述][54017356c49e445b8e36af71bbbfd9dc.png]
4.  安装完成  
    ![在这里插入图片描述][6a9a4e47aff4496380ba329c987a15bb.png]
5.  因为我们需要了element-ui组件库，所以我们要手动安装一下依赖
    
        npm install element-plus --save

### 四 创建组件 ###

1.  首先，我们要在`src`目录下，创建一个`package`文件夹，  
    ![在这里插入图片描述][48c9d9b83c4d43cd81997e7e9205c9ed.png]
2.  在`package`文件夹下创建`.vue`文件，（自定义名字）  
    ![在这里插入图片描述][e26d3397883342b68adf0c5f095dcb6c.png]
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中文文档][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
    
    ![在这里插入图片描述][c89e74900f7d4ee9996612a2b28f44f3.png]
2.  注册`npm`账号 [官网地址][Link 1]
    
     *  想要发布到`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` 验证码  
        ![在这里插入图片描述][853d6693115c405fb89494178bac1e70.png]
5.  执行发布命令
    
        npm publish
    
    出现如下就说明我们上传成功了，然后我们到我们的`npm`项目中查看结果  
    ![在这里插入图片描述][ad053067e6a84af188a73b554c5ea46e.png]  
    已经上传成功  
    ![在这里插入图片描述][de4e798f93394e3c8a58eaa022ad310b.png]

### 七 使用组件 ###

当我们要在项目中使用的时候就复制`npm i common-lyh`  
![在这里插入图片描述][f89b4f475602494f8ed2fa6d044ff99d.png]  
`package.json`文件中就有了我们安装的组件  
![在这里插入图片描述][657dba60f60b48f18f73aa2ce7de9270.png]  
这个时候只要像`element ui` 那样引入就可以全局使用了，在`main.js`中引入  
![在这里插入图片描述][9f7ef71d57494c54854bc3f0179414ce.png]

在我们要用到得`.vue`中使用  
![在这里插入图片描述][2e7238de16804253b32008f72f64d5ff.png]

### 总结 ###

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

[55f6a6e59abc439d9ab97a44c2a93c69.png]: https://img-blog.csdnimg.cn/55f6a6e59abc439d9ab97a44c2a93c69.png
[961fffce7cb949cc872d68c4719074d4.png]: https://img-blog.csdnimg.cn/961fffce7cb949cc872d68c4719074d4.png
[54017356c49e445b8e36af71bbbfd9dc.png]: https://img-blog.csdnimg.cn/54017356c49e445b8e36af71bbbfd9dc.png
[6a9a4e47aff4496380ba329c987a15bb.png]: https://img-blog.csdnimg.cn/6a9a4e47aff4496380ba329c987a15bb.png
[48c9d9b83c4d43cd81997e7e9205c9ed.png]: https://img-blog.csdnimg.cn/48c9d9b83c4d43cd81997e7e9205c9ed.png
[e26d3397883342b68adf0c5f095dcb6c.png]: https://img-blog.csdnimg.cn/e26d3397883342b68adf0c5f095dcb6c.png
[vite]: https://cn.vitejs.dev/guide/build.html#library-mode
[c89e74900f7d4ee9996612a2b28f44f3.png]: https://img-blog.csdnimg.cn/c89e74900f7d4ee9996612a2b28f44f3.png
[Link 1]: https://www.npmjs.com/
[853d6693115c405fb89494178bac1e70.png]: https://img-blog.csdnimg.cn/853d6693115c405fb89494178bac1e70.png
[ad053067e6a84af188a73b554c5ea46e.png]: https://img-blog.csdnimg.cn/ad053067e6a84af188a73b554c5ea46e.png
[de4e798f93394e3c8a58eaa022ad310b.png]: https://img-blog.csdnimg.cn/de4e798f93394e3c8a58eaa022ad310b.png
[f89b4f475602494f8ed2fa6d044ff99d.png]: https://img-blog.csdnimg.cn/f89b4f475602494f8ed2fa6d044ff99d.png
[657dba60f60b48f18f73aa2ce7de9270.png]: https://img-blog.csdnimg.cn/657dba60f60b48f18f73aa2ce7de9270.png
[9f7ef71d57494c54854bc3f0179414ce.png]: https://img-blog.csdnimg.cn/9f7ef71d57494c54854bc3f0179414ce.png
[2e7238de16804253b32008f72f64d5ff.png]: https://img-blog.csdnimg.cn/2e7238de16804253b32008f72f64d5ff.png