vue3.x + vite4.3构建属于自己的组件库并发布npm包

本文介绍: 在国内的项目研发过程中，使用vue框架的项目占比很大，同样延伸出了很多非常优秀的UI组件库，比如element-plus、ant-design等；优势：资源较少，快速开发，丰富的API，阅读性、性能优化更好等等。

欢迎点击领取 -《前端开发面试题进阶秘籍》：前端登顶之巅-最全面的前端知识点梳理总结

在国内的项目研发过程中，使用vue框架的项目占比很大，同样延伸出了很多非常优秀的UI组件库，比如element-plus、ant-design等；优势：资源较少，快速开发，丰富的API，阅读性、性能优化更好等等。

开发流程准备

创建基础的vite脚手架

npm i -g pnpm // 先安装pnpm第三方依赖包管理工具(npm/cnpm/yarn/pnpm之间的区别自行百度)
pnpm create vite

如下方图片: 在这里插入图片描述

将vite-project项目-目录结构进行基础修改：
在packages文件下导出并注册所涉及的组件

import vCharts from './v-charts/v-charts.vue'
import TableList from './TableList/TableList.vue'
import SearchForm from './SearchForm/SearchForm.vue'
import CustomSelect from './custom-select/index.vue'

export * from './v-charts/useCharts';

const components = [SearchForm, TableList, vCharts, CustomSelect]

const install = function (Vue: any) {
  components.forEach((app) => {
    Vue.component(app.name, app);
  });
};

export default install;

修改vite.config.ts

import { resolve } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import libCss from 'vite-plugin-libcss';

export default defineConfig({
  plugins: [vue(), libCss()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    },
  },
  build: {
    outDir: "dist",
    target: "es2015",
    lib: {
      name: "TrapUI", // 名称
      entry: resolve(__dirname, "src/packages/index.ts"), // 打包文件入口
      fileName: (format) => `trap-ui.${format}.js`, // 打包文件的名字
    },
    chunkSizeWarningLimit: 2000,
    rollupOptions: {
      external: ["vue", "axios", "echarts", '@popperjs/core', 'vue-router', "element-plus"],
      output: {
        exports: 'named',
        globals: {
          vue: "Vue",
          axios: 'axios',
          echarts: 'echarts',
          'vue-router': 'vueRouter',
          "element-plus": "ElementPlus",
          '@popperjs/core': '@popperjs/core',
        },
      },
    },
  },
});