当前位置：首页 > backend >正文

如何在 npm 上发布 Element Plus 二次封装组件

backend 2025/7/25 9:26:26

在一次开发中，小李接到一个重要的任务：将 Element Plus 中的时间组件根据团队的独特需求进行二次封装。他灵机一动，决定将这个自定义组件打包成一个 npm 包，以便团队的其他小伙伴们可以快速、方便地使用。接下来，让我们跟随小李的脚步，一同探索这个令人兴奋的过程吧！

1. 初始化 npm 包

小李首先在一个干净的文件夹中初始化项目。命令行窗口里，他轻松输入：

npm init

根据提示填写包的名称、版本和描述，最终生成了一个 package.json 文件。

2. 安装 Vue 3 和 Element Plus

为了让组件有强大的动力，小李开始安装 Vue 3 和 Element Plus：

npm install vue
npm install element-plus

3. 创建组件

接下来，小李在项目文件夹中创建一个 src 目录，并在其中新建一个 index.vue 文件，开始编写他的时间选择器组件：

<!-- src/ByDatePicker/index.vue -->
<template><el-date-picker v-model="timeValue" />
</template><script setup name="ByDataPicker">
import { ref, watch } from "vue";const props = defineProps({startTime: {type: String,default: "",},stopTime: {type: String,default: "",},
});const emit = defineEmits(["update:startTime", "update:stopTime"]);
const timeValue = ref([]);const install = () => {let data = [props.startTime || "", props.stopTime || ""];timeValue.value = data;let start = data[0];let stop = data[1];emit("update:startTime", start);emit("update:stopTime", stop);
};
install();
//监听外部传递进来的的数据变化
watch(() => props.startTime,() => {install();}
);
//监听数据变化
watch(() => timeValue.value,(val) => {if (!val || val === null || val === "") {val = ["", ""];}let start = val[0];let stop = val[1];emit("update:startTime", start);emit("update:stopTime", stop);}
);
</script><style lang="scss" scoped></style>

小提示：记得组件中使用ref watch等关键字一定要进行import引入，否则打包后可就要报错了哦！

4.配置入口文件

为了让其他人能够轻松导入这个组件，小李在 src 目录下创建了一个 index.js 文件：

// src/index.js
import ByDatePicker from "./ByDatePicker/index.vue";export default ByDatePicker;

5. 添加构建工具

小李想要将组件打包成可以在其他项目中使用的格式，决定采用 Vite 作为构建工具。

5.1 安装 Vite

他快速安装vite和@vitejs/plugin-vue 插件：

npm install --save-dev vite @vitejs/plugin-vue

5.2 创建 Vite 配置文件

小李又新建了一个 vite.config.js 文件，配置如下：

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";export default defineConfig({plugins: [vue()],build: {lib: {entry: "src/index.js",name: "ByDatePicker",fileName: (format) => `by-date-picker.${format}.js`,},rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ["vue", "element-plus"],output: {globals: {vue: "Vue","element-plus": "ElementPlus",},},},},
});

6.添加构建脚本

在 package.json 中添加构建脚本：

"scripts": {"build": "vite build"
}

7.构建组件

终于，小李可以运行构建命令，生成编译后的组件代码：

npm run build

编译完成后，dist 目录中将出现他的杰作，闪闪发光！

8.更新 package.json

{"name": "by-date-picker","version": "1.0.0",//每次发布前都需要更新版本号否则发布不成功"main": "dist/by-date-picker.umd.js","module": "dist/by-date-picker.es.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "vite build"},"dependencies": {"element-plus": "^2.10.4","vue": "^3.5.18"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.4","vite": "^6.3.5"}
}