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

Vue组件库开发实战：从0到1构建可复用的微前端模块

article 2026/1/12 20:52:55

🔥 随着前端项目越来越复杂，如何开发一个可以随处使用的组件库变得尤为重要。本文将带你从0开始，实现一个完全独立的Vue组件库，包含样式隔离、主题定制等核心功能。

前言

在日常开发中，我们经常需要在不同项目间复用组件，但直接复制代码显然不是一个好办法。如何开发一个可以即插即用的组件库呢？本文将从实战角度出发，手把手教你实现。

技术栈

Vue 2.6.14
Vuex 3.6.2
Rollup
PostCSS
Ant Design Vue / Element UI

一、项目搭建

1.1 初始化项目

首先创建项目并安装依赖：

# 创建项目目录
mkdir micro-ct && cd micro-ct# 初始化package.json
npm init -y# 安装核心依赖
npm install vue@2.6.14 vuex@3.6.2 ant-design-vue@1.7.8 element-ui@2.15.14 --save# 安装开发依赖
npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel @rollup/plugin-replace rollup-plugin-vue rollup-plugin-postcss postcss-prefix-selector --save-dev

1.2 配置Rollup

创建 rollup.config.js：

import commonjs from '@rollup/plugin-commonjs'
import vue from 'rollup-plugin-vue'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'
import postcss from 'rollup-plugin-postcss'export default {input: 'src/main.js',output: {file: 'dist/micro-ct.js',format: 'iife',name: 'MicroCT',globals: {vue: 'Vue','vue-router': 'VueRouter',vuex: 'Vuex','ant-design-vue': 'antd'}},external: ['vue', 'vue-router', 'vuex', 'ant-design-vue'],plugins: [postcss({plugins: [require('postcss-prefix-selector')({prefix: '.micro-ct-root',exclude: ['.micro-ct-root']})],extract: 'micro-ct.css'}),vue({css: false}),babel({babelHelpers: 'bundled',exclude: 'node_modules/**'}),terser()]
}

这里有几个关键点：

format: 'iife' - 打包成立即执行函数，避免污染全局
external - 外部依赖不打包，减小体积
postcss-prefix-selector - 添加样式前缀，实现样式隔离

二、核心功能实现

2.1 入口文件

创建 src/main.js：

import Vue from 'vue'
import App from './App.vue'
import store from './store'// 事件总线，用于页面切换
export const EventBus = new Vue()const MicroCT = {init(options = {}) {const { container, width, height } = optionsconst app = new Vue({store,render: h => h(App, {props: { width, height }})})app.$mount(container || '#micro-ct-container')return app},// 页面跳转APIgoTo(pageName) {EventBus.$emit('change-page', pageName)},// 获取当前页面getCurrentPage() {return localStorage.getItem('MicroCtCurrentPage') || 'home'}
}export default MicroCT

2.2 页面管理器

创建 src/components/PageManager.vue：

<template><div class="page-manager"><component :is="currentPage"></component></div>
</template><script>
import { EventBus } from '@/main'export default {name: 'PageManager',data() {return {currentPage: 'home'}},created() {// 监听页面切换事件EventBus.$on('change-page', this.handlePageChange)},methods: {handlePageChange(pageName) {this.currentPage = pageNamelocalStorage.setItem('MicroCtCurrentPage', pageName)}}
}
</script>

2.3 主题定制

创建 src/styles/variables.css：

:root {--mc-primary-color: #f56c6c;--mc-text-color: #303133;--mc-border-radius: 8px;--mc-background-color: #fff;--mc-font-size: 16px;--mc-padding: 30px;--mc-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

在组件中使用：

<style scoped>
.my-button {color: var(--mc-primary-color);border-radius: var(--mc-border-radius);font-size: var(--mc-font-size);padding: var(--mc-padding);
}
</style>

三、使用方法

3.1 基础使用

<!DOCTYPE html>
<html>
<head><!-- 引入依赖 --><script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script><script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script><!-- 引入组件库 --><script src="dist/micro-ct.js"></script><link rel="stylesheet" href="dist/micro-ct.css">
</head>
<body><!-- 容器 --><div id="micro-ct-container"></div><script>// 初始化MicroCT.init({container: '#micro-ct-container',width: '100%',height: '500px'})// 页面跳转MicroCT.goTo('about')</script>
</body>
</html>

3.2 主题定制

#micro-ct-container {/* 修改主题色 */--mc-primary-color: #409eff;--mc-border-radius: 4px;--mc-font-size: 14px;
}

四、最佳实践

4.1 样式开发规范

使用BEM命名：

.block__element--modifier {/* 样式 */
}

避免全局样式：

/* 错误 ❌ */
.button { }/* 正确 ✅ */
.my-component__button { }

使用CSS变量：

/* 错误 ❌ */
.text {color: #409eff;
}/* 正确 ✅ */
.text {color: var(--mc-primary-color);
}

4.2 组件开发规范

异步组件：

export default {components: {HelloWorld: () => import('./components/HelloWorld.vue')}
}

Props验证：

export default {props: {width: {type: [String, Number],default: '100%'},height: {type: [String, Number],required: true}}
}

五、常见问题

5.1 样式冲突

问题：组件样式影响到宿主项目

解决：

确保postcss-prefix-selector配置正确
检查是否使用了全局选择器
使用scoped属性

5.2 打包体积

问题：打包文件过大

解决：

使用external配置外部依赖
开启tree-shaking
按需加载组件
压缩代码

5.3 浏览器兼容

问题：CSS变量兼容性

解决：

添加fallback值：

.button {color: #409eff; /* fallback */color: var(--mc-primary-color);
}

使用postcss-custom-properties插件

总结

通过本文，我们学习了：

如何使用Rollup构建组件库
如何实现样式隔离
如何支持主题定制
最佳实践和注意事项

参考资料

Rollup官方文档
Vue组件库开发指南
PostCSS插件开发

如果觉得本文对你有帮助，欢迎点赞、收藏、关注！

Vue组件库开发实战：从0到1构建可复用的微前端模块

🔥 随着前端项目越来越复杂，如何开发一个可以随处使用的组件库变得尤为重要。本文将带你从0开始，实现一个完全独立的Vue组件库，包含样式隔离、主题定制等核心功能。前言在日常开发中，我们经常需要在不同项目间复用组…...

编程日记 2026/1/5 8:24:35

相机标定（输出相机内参和畸变参数）

相机标定这里我用笔记本电脑自带的摄像头进行相机标定仅作示例，实际工程中要用对应的摄像头进行标定同时代码也要相应的修改，不过修改的主要是相机的初始化粗略的说就是打开相机那部分要修改（依据实际情况相应修改） 最终的结果…...

编程日记 2025/5/23 19:16:04

单页面应用的特点,什么是路由,VueRouter的下载,安装和使用,路由的封装抽离,声明式导航的介绍和使用

文章目录一.什么是单页面应用?二.什么是路由?生活中的路由和Vue中的路由三.VueRouter(重点)0.引出1.介绍2.下载与使用(5个基本步骤2个核心步骤)2.1 五个基本步骤2.2 两个核心步骤四.路由的封装抽离五.声明式导航1.导航链接特点一:能跳转特点二:能高亮 2.两个高亮类名2.1.区…...

编程日记 2026/1/5 23:15:10

数字ic后端设计从入门到精通2（含fusion compiler, tcl教学）

上篇回顾上一篇文章需要讨论了net,pin的基础用法，让我们来看一下高级一点的用法 instance current_instance current_instance 是 Synopsys 工具（如 Fusion Compiler 或 Design Compiler）中用于在设计层次结构中导航的关键命令。它允许用…...

编程日记 2025/12/31 8:26:36

STM32---外部中断EXTI

目录一、中断向量表二、EXTI工作原理图三、NVIC模块四、GPIO设置为EXTI的结构五、C语言示例代码在STM32中，中断是一个非常重要的结构，他能让我们在执行主函数的时候，由硬件检测一些外部或内部产生的中断信号，跳转到中断…...

编程日记 2026/1/7 14:58:32

Itext进行PDF的编辑开发

这周写了一周的需求，是制作一个PDF生成功能，其中用到了Itext来制作PDF的视觉效果。其中一些功能不是很懂，仅作记录，若要学习请仔细甄别正确与否。开始之前，我还是想说，这傻福需求怎么想出来的&#xff0c…...

编程日记 2026/1/5 6:32:59

Hibernate的组件映射

在实际的开发中,使用的是非常多的，还有几种比较特殊的关系映射: 组件映射继承映射先看一下组件映射: 组件映射中, 组件也是一个类, 但是这个类它不独立称为一个实体, 也就是说, 数据库中没有一个表格单独的和它对应, 具体情况呢, 看演示：...

编程日记 2026/1/5 22:14:58

C++ 操作符重载Operator

C可以重载大多数操作符，如算术运算符号，-号。位操作符<<,>> 下标符号[]等都可以重载。重载的意思，是让这些符号，按你定义的行为来执行代码，但是这种自定义，是有限制的，必须有一…...

编程日记 2026/1/5 23:23:54

Docker 镜像、容器和 Docker Compose的区别

前言：Docker 的镜像、容器和 Docker Compose 是容器化技术的核心组件，以下是对它们的详细解析及使用场景说明。 1、Docker 镜像（Image） 定义： 镜像是只读模板，包含运行应用程序所需的代码、…...

编程日记 2026/1/12 17:47:39

Linux深度探索：进程管理与系统架构

1.冯诺依曼体系结构我们常见的计算机，如笔记本。我们不常见的计算机，如服务器，大部分都遵守冯诺依曼体系。截至目前，我们所认识的计算机，都是由⼀个个的硬件组件组成。输入设备：键盘，鼠标…...

编程日记 2026/1/7 19:11:06

一段式端到端自动驾驶：VAD：Vectorized Scene Representation for Efficient Autonomous Driving

论文地址：https://github.com/hustvl/VAD 代码地址：https://arxiv.org/pdf/2303.12077 1. 摘要自动驾驶需要对周围环境进行全面理解，以实现可靠的轨迹规划。以往的方法依赖于密集的栅格化场景表示（如：占据图、语义…...

编程日记 2026/1/11 14:09:02

从入门AI到手写Transformer-17.整体代码讲解 17.整体代码讲解代码整理自视频老袁不说话。 17.整体代码讲解代码 import collectionsimport math import torch from torch import nn import os import time import numpy as np from matplotlib import pyplot as plt fro…...

编程日记 2025/12/8 10:21:15

把dll模块注入到游戏进程的方法_基于文件修改的注入方式

1、概述本文主要是介绍两种基于文件修改的注入方式，一种是“DLL劫持”，另一种是“修改导入表”。这两种注入方式都是利用操作系统加载PE时的特点来实现的，我们在实现这两种注入方式时只需专注于注入dll的实现，而不用花费额外的精力去关注注入器的实现。要想深入了解这两种…...

编程日记 2025/12/9 7:11:31

4月21日星期一今日早报简报微语报早读

4月21日星期一，农历三月廿四，早报#微语早读。 1、女子伸腿阻止列车关门等待同行人员，被深圳铁路警方行政拘留； 2、北理工再通报：开除宫某党籍，免去行政职务，解除聘用关系； 3、澳门…...

编程日记 2026/1/5 4:17:32

Spark(20)spark和Hadoop的区别

Apache Spark 和 Apache Hadoop 都是广泛使用的开源大数据处理框架，但它们在设计理念、架构、性能和适用场景等方面存在显著区别。以下是它们的主要区别： ### **1. 架构设计** - **Hadoop**： - **HDFS（Hadoop Distributed File…...

编程日记 2025/12/7 15:01:13

Kubeflow 快速入门实战(二) - Pipelines / Katib / KServer

承接前文博客 Kubeflow 快速入门实战(一) Kubeflow 快速入门实战(一) - 简介 / Notebooks-CSDN博客文章浏览阅读441次，点赞19次，收藏6次。本文主要介绍了 Kubeflow 的主要功能和能力，适用场景，基本用法。以及Notebook&#xff0c…...

编程日记 2026/1/8 12:11:20

【JavaEE初阶】多线程重点知识以及常考的面试题－多线程进阶（一）

本篇博客给大家带来的是多线程中常见的所策略和CAS知识点. 🐎文章专栏: JavaEE初阶 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅🚀 要开心要快…...

编程日记 2026/1/6 9:02:22

ECA 注意力机制：让你的卷积神经网络更上一层楼

ECA 注意力机制：让你的卷积神经网络更上一层楼在深度学习领域，注意力机制已经成为提升模型性能的重要手段。从自注意力（Self-Attention）到各种变体，研究人员不断探索更高效、更有效的注意方法。今天我们要介绍一种轻…...

编程日记 2025/12/8 20:13:34

基于定时器查询模式的LED闪烁（STC89C52单片机）

#include <reg52.h> sbit LED P0^0; sbit ADDR0 P1^0; sbit ADDR1 P1^1; sbit ADDR2 P1^2; sbit ADDR3 P1^3; sbit ENLED P1^4; void main() { unsigned char cnt 0; //定义一个计数变量，记录T0溢出次数 ENLED 0; //使能U3，选择…...

编程日记 2026/1/12 12:53:16

SAP系统生产跟踪报表入库数异常

生产跟踪报表入库数异常交库21820,入库43588是不可能的原因排查: 报表的入库数取值,是取移动类型321 (即系检验合格后过账到非限制使用)的数. 查凭证,101过账2次21807,321过账了2次21794,然后用102退1次21794.就是说这批物料重复交库了. 解决： 方案一:开发增强设…...

编程日记 2026/1/8 1:47:25

Kubernetes控制平面组件：调度器Scheduler（一）

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...

编程日记 2026/1/4 17:17:44

08-DevOps-向Harbor上传自定义镜像

harbor创建完成，往harbor镜像仓库中上传自定义的镜像，包括新建项目、docker配置镜像地址、镜像重命名、登录harbor、推送镜像这几个步骤，具体操作如下： harbor中新建项目访问级别公开，代表任何人都可以拉取仓库中的镜…...

编程日记 2026/1/11 17:34:43

Vue v-for 循环DOM 指定dom个数展示一行

在Vue.js中，如果想根据v-for循环的结果来控制哪些元素应该在一行中展示，你可以通过计算属性或者方法来实现。这里使用CSS改变样式和js脚本两种方式做到这一点，根据你的具体需求选择适合的方法。方法1：使用计算属性如果你想要基…...

编程日记 2025/12/8 9:50:55

mysql控制单表数据存储及单实例表创建

1. 单表数据存储不要过大主流建议保守建议。100万以内保持最佳性能其他。不超过2000万理论依据。 B树层级可能变多。从3增加到4。导致索引查询路径边长，增加IO开销优化加索引。对高频查询字段增加索引。避免全表扫描低频历史数据通过分区表或归档隔离。足够的…...

编程日记 2026/1/8 3:24:44

极验4滑块笔记：整理思路--填坑各种问题

最近在研究某验4逆向分析，以前没弄过这种，所以爬了很多坑，就是把分享给大家~ 1.这个gcaptcha4.js需要逆向，我的方法很笨就是将_ᕶᕴᕹᕶ()这个蝌蚪文打印处来，全局替换一下，然后Unicode这种代码&#xff0…...

编程日记 2026/1/8 21:29:54

LX3-初识是单片机

初识单片机一什么是单片机单片机:单片微型计算机单片机的组成:CPU,RAM(内存),flash(硬盘),总线,时钟,外设…… 二 Coretex-M系列介绍了解ARM公司与ST公司ARM内核系列: A 高性能应用,如手机,电脑…R 实时性强,如汽车电子,军工…M 超低功耗,如消费电子,家电,医疗器械三…...

编程日记 2026/1/7 9:37:45