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

一 前言

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

二 创建项目

npm init vite@latest

三 创建步骤

  1. 提示我们要安装[email protected]得依赖,选择y
    vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第1张图片

  2. 起一个组件名字,然后我们选择vue
    vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第2张图片

  3. 这里我选择的是javascript,然后回车
    vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第3张图片

  4. 安装完成
    vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第4张图片

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

    npm install element-plus --save
    

四 创建组件

  1. 首先,我们要在src目录下,创建一个package文件夹,
    vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第5张图片

  2. package文件夹下创建.vue文件,(自定义名字)
    vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第6张图片

  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
    

    vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第7张图片

  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 验证码
      vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第8张图片
  5. 执行发布命令

    npm publish
    

    出现如下就说明我们上传成功了,然后我们到我们的npm项目中查看结果
    vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第9张图片
    已经上传成功
    vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第10张图片

七 使用组件

当我们要在项目中使用的时候就复制npm i common-lyh
vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第11张图片
package.json文件中就有了我们安装的组件
vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第12张图片
这个时候只要像element ui 那样引入就可以全局使用了,在main.js中引入
vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。_第13张图片

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

总结

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

你可能感兴趣的:(vue.js,npm,javascript,vue,elementui)