将组件打包成插件

将组件打包成插件引入到项目当中（避免直接看源码）

1 components/index.js
import  ListExport  from './ListExport/index.vue'
// 存储组件列表
const components = [
    ListExport
]
// 用于按需导入
export {
    ListExport
    }
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {

// 判断是否安装
if (install.installed) return
 // 遍历注册全局组件
 components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
}
export default {
 // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
 install,
 // 以下是具体的组件列表
 ...components
}

2 package.json
  "main": "lib/components-ui.umd.js",
  "module": "lib/components-ui.es.js",
  "exports": {
    "./lib/style.css": "./lib/style.css",
    ".": {
      "import": "./lib/components-ui.es.js",
      "require": "./lib/components-ui.umd.js"
    }
  }
  3 vite.config.js
      build: {
        outDir: "lib",
        lib: {
          //库编译模式配置
          entry: resolve(__dirname, "src/components/index.js"), //指定组件编译入口文件
          name: "components-ui",
          fileName: (format) => `components-ui.${format}.js`,
        },
        rollupOptions: {
          //rollup打包配置
          external: ["vue", "element-plus"], // 指定外部依赖
          output: {
            // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
            globals: {
              vue: "Vue",
              "element-plus": "elementPlus",
            },
          },
        },
      }
      4 引入
    import {ListExport} from "@/lib/components-ui.es.js";;