【vue组件库搭建06】组件库构建及npm发包

一、格式化目录结构

根据以下图片搭建组件库目录

index.js作为入口文件,将所有组件引入,并注册组件名称

import { EButton } from "./Button";
export * from "./Button";
import { ECard } from "./Card";
export * from "./Card";const cmpts = [EButton, ECard];const EricUI = {install(Vue) {cmpts.forEach(cmpt => {Vue.component(cmpt.name, cmpt);});},
};export default EricUI;

utils.js:给组件绑定注册方法

export function withInstall(component) {component.install = app => {app.component(component.name, component);};return component;
}

在main.js中引入,方便后续使用

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.less";import EricUI from "../components";const app = createApp(App).use(Antd).use(EricUI).mount("#app");

在docs\.vitepress\theme\index.ts同样引入

// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'import Antd from 'ant-design-vue';
import './antd-overwrite.less'import { AntDesignContainer } from '@vitepress-demo-preview/component'
import '@vitepress-demo-preview/component/dist/style.css'import './style.css'import HomeImage from './HomeImage.vue'
import EricUI from "../../../components";export default {extends: DefaultTheme,Layout: () => {return h(DefaultTheme.Layout, null, {// https://vitepress.dev/guide/extending-default-theme#layout-slots'home-hero-image': () => h(HomeImage)})},enhanceApp({ app, router, siteData }) {app.use(Antd)app.use(EricUI)app.component('demo-preview', AntDesignContainer)}
} satisfies Theme

到此为止,组件库开发的组件可以在docs中展示:

EButton是我们开发的button组件,在Button.md中引入

 效果:

二、组件库构建

 新建build文件夹,以及以下三个文件:

// base.confi.jsimport { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";// 文档: https://vitejs.dev/config/
export default defineConfig({minify: false,css: {preprocessorOptions: {less: {javascriptEnabled: true,modifyVars: {"ant-prefix": "ant",},},},},plugins: [],resolve: {alias: {"@": fileURLToPath(new URL("../src", import.meta.url)),},},
});
// lib.config.jsimport { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";
import vue from "@vitejs/plugin-vue";
import lessEntry from "./vite-plugin-less-entry";
import baseConfig from "./base.config";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { viteStaticCopy } from "vite-plugin-static-copy";export default defineConfig({...baseConfig,build: {sourcemap: true,outDir: "lib",lib: {entry: fileURLToPath(new URL("../components/index.js", import.meta.url)),name: "EricUI",fileName: format => `eric-ui.${format}.js`,},rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ["vue","@ant-design/icons-vue","vxe-table","xe-utils","@vitepress-demo-preview/component","@vitepress-demo-preview/plugin",],},},plugins: [vue(),vueJsx(),viteStaticCopy({targets: [{src: "components/**/*.less",dest: "/",},],structured: true,}),lessEntry({// 生成的入口文件名entry: "components",// libPath需要与viteStaticCopy中的dest保持一致libPath: "components",name: "style",}),],
});
// vite-plugin-less-entry.jsimport path from "node:path";
import fs from "fs-extra";const name = "vite-plugin-custom-less-entry";
export const formatConsole = msg => `[${name}] ${msg}`;
/*** 生成项目less的入口文件*/
export default function lessEntryPlugin({ entry, libPath, name }) {let outputed = false;let rootConfig = null;return {name,apply: "build",order: "post",configResolved(config) {rootConfig = config;},writeBundle() {if (outputed) {return;}outputed = true;// 遍历entry下的index.less文件,生成${name}.less文件const componentsPath = path.join(rootConfig.root, entry);let componentsLessContent = "";fs.readdir(componentsPath, (err, files) => {files.forEach(file => {if (fs.existsSync(path.join(componentsPath, file, "index.less"))) {componentsLessContent += `@import "./${libPath}/${path.posix.join(file,"index.less")}";\n`;}});const lessEntryFile = path.join(rootConfig.root,rootConfig.build.outDir,`${name}.less`);fs.outputFile(lessEntryFile, componentsLessContent, err => {if (err) {console.error(formatConsole("Failed to generate less entry file"));} else {console.info(formatConsole("Successfully generated less entry file"));}});});},};
}

配置package.json:

{"name": "eric-ui-lib","version": "0.0.2","description": "eric-ui组件库","main": "lib/eric-ui.umd.js","module": "lib/eric-ui.es.js","files": ["lib"],"keywords": ["eric-ui","eric","ui"],"author": "Eric","type": "module","scripts": {"dev": "vite","build": "vite build","build:lib": "vite build --config ./build/lib.config.js","preview": "vite preview","docs:dev": "vitepress dev docs","docs:build": "vitepress build docs","docs:preview": "vitepress preview docs"},"dependencies": {"@vitepress-demo-preview/component": "^2.3.2","@vitepress-demo-preview/plugin": "^1.2.3","ant-design-vue": "^3.2.20","fs-extra": "^11.2.0","less-loader": "^12.2.0","vite-plugin-static-copy": "^1.0.6","vue": "^3.4.29"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.5","@vitejs/plugin-vue-jsx": "^4.0.0","less": "^4.2.0","vite": "^5.3.1","vitepress": "^1.2.3"}
}

三、npm发布

npm login 登录,没有注册的自行注册

npm publish

查看npm,即发布成功 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/42674.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一、MyBatis

一、MyBatis 1、MyBatis简介 1.1、MyBatis历史 MyBatis最初是Apache的一个开源项目iBatis, 2010年6月这个项目由Apache Software Foundation迁移到了Google Code。随着开发团队转投Google Code旗下, iBatis3.x正式更名为MyBatis。代码于2013年11月迁移到Github。…

计算机网络之无线局域网

1.无线局域网工作方式 工作方式:每台PC机上有一个无线收发机(无线网卡), 它能够向网络上的其他PC机发送和接受无线电信号。 与有线以太网相似,无线局域网也是打包方式发送数据的。每块网卡都有一个永久的、唯一的ID号…

Unity2D - 基本战斗系统(Battle System Design)

1. 攻击逻辑 在Entity中初始化两个变量,因为在每个角色几乎都拥有攻击状态。这两个变量分别是transform类,接收一个坐标和一个半径画一个圆作为攻击的判定范围 public Transform attackCheck; public float attackCheckRadius; 为了可视化攻击范围&am…

Python的多态

在 Python 中,多态(Polymorphism)是指不同的对象可以对相同的消息(方法调用)做出不同的响应。 简单来说,多态允许使用一个统一的接口来操作不同类型的对象,而这些对象会根据自身的类型来执行相应…

某水利集团晋升体系优化项目成功案例纪实

——通过多元化职业晋升通道,激发员工潜力 【客户行业】水务行业;水利处理 【问题类型】晋升体系优化;人才管理系统 【客户背景】 某水利处理集团是国内领先的综合性水资源管理与水务服务供应商。该集团专注于提供包括原水供应、自来水生…

基于ROS的智能网联车远程交互软件,全UI无需记忆指令,剑指核心原理。

基于ROS的智能网联车远程交互软件,全UI无需记忆指令,剑指核心原理。 服务于中汽恒泰,伟大的项目,希望看官点赞,谢谢~~ 进程(节点)列表化,参数面板化,实现快速机器人配置…

Linux--V4L2摄像头驱动框架及UVC浅析

一、前言 对于一个usb摄像头,它的内核驱动源码位于/drivers/media/usb/uvc/ 核心层:V4L2_dev.c文件 硬件相关层: uvc_driver.c文件 本篇记录基于对6.8.8.8内核下vivid-core.c文件(虚拟视频驱动程序)的分析&#xff…

推荐系统中Prior Belief的概念(附代码)

在推荐系统中,先验信念(prior belief)是指在没有观察到实际数据之前,我们对某些参数或变量的初始假设或预期。这种先验信念可以帮助模型在数据稀疏或噪声较多的情况下做出更好的预测。 先验信念(Prior Belief&#xf…

独立站运营招聘:寻找璀璨之星,开启运营之旅

尊敬的各位同仁,我乃大家熟知的独立站长,对于运营独立站点始终保持着满腔热情。今日,我欲与诸位共同探讨一热门议题—独立站运营招聘。此次招聘不再仅为职位争夺,更为寻找璀璨之星的探险之旅。 独立站的灵魂:什么是独…

Mysql中视图的使用以及常见运算符的使用示例和优先级

场景 基础知识回顾:mysql中视图的基础使用以及常见运算符的使用示例。 注: 博客:霸道流氓气质-CSDN博客 实现 Mysql中视图的使用 视图的创建 CREATE VIEW stu_view AS SELECT * FROM bus_student; 视图查询 SELECT * FROM stu_view;…

澳大利亚媒体发稿:怎样用图表提高易读性?-华媒舍

媒体发稿的可读性变得尤为重要。读者们不会再有时间与耐心去阅读文章繁琐的文本,他们更喜欢简洁明了的信息展现形式,在其中图表是一种极为高效的专用工具。下面我们就详细介绍怎么使用图表提高澳大利亚新闻媒体发稿的可读性,以适应读者的需要…

java 栅栏(CyclicBarrier)

Java中的栅栏(CyclicBarrier)是一种用于协调多个线程并发工作的同步辅助类。与CountDownLatch不同,CyclicBarrier允许一组线程相互等待,直到所有线程都到达一个共同的屏障点(barrier)后,才继续执…

CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)

CSS 样式选择器&#xff0c;用于选中页面中的 html 元素&#xff0c;以便添加 CSS 样式。 按渲染性能由高到低 依次是&#xff1a; ID 选择器 #id 通过元素的 id 属性选中元素&#xff0c;区分大小写 <p id"p1" >第一段</p>#p1{color: red; }但不推荐使…

【LinuxC语言】手撕Http之处理POST请求

文章目录 前言声明POST的组成读取POST信息读取消息体长度读取消息体解析消息体How to use?总结前言 在互联网的世界中,HTTP协议无疑是最重要的协议之一。它是Web的基础,支持着我们日常生活中的大部分在线活动。尽管有许多现成的库可以处理HTTP请求,但了解其底层工作原理是…

全面解析:儿童编程等级考试及其区别

目录 1. 前言2. 儿童编程等级考试的重要性3. 儿童编程等级考试的特点4. 儿童编程等级考试4.1 非专业级软件能力认证(CSP-J/S)4.2 GESP编程能力等级认证4.3 青少年编程能力等级测试(CPA)4.4 全国青少年软件编程等级考试4.5 全国青少年编程能力等级考试(PAAT)1. 前言 近年来…

【学习笔记】Mybatis-Plus(四):MP中内置的插件

内置插件 目前MP已经存在的内部插件包括如下&#xff1a; 插件类名作用PaginationInnerInterceptor分页插件。可以代替以前的PageHelperOptimisticLockerInnerInterceptor乐观锁插件。用于幂等性操作&#xff0c;采用版本更新记录DynamicTableNameInnerInterceptor动态表名Te…

【Rust】Cargo介绍

一、Cargo简介 Cargo 是Rust语言的包管理工具&#xff0c;它帮助我们管理我们项目的依赖。做js开发的同学应该了解nodejs的包管理工具npm&#xff0c;Cargo和npm做的事情是一样的。C和C的同学可能对这个就比较陌生了&#xff0c;C/C语言没有统一的依赖管理工具&#xff0c;各个…

Spring中常见知识点及使用

Spring Framework 是 Java 生态系统中最流行的开源框架之一&#xff0c;它提供了一系列强大的功能&#xff0c;用于构建企业级应用。以下是一些常见的 Spring 知识点及其使用方法&#xff1a; 1. 依赖注入&#xff08;Dependency Injection&#xff09; 依赖注入是 Spring 的…

【SpringCloud应用框架】Nacos集群架构说明

第六章 Spring Cloud Alibaba Nacos之集群架构说明 文章目录 前言一、Nacos支持三种部署模式二、集群部署说明三、预备环境 前言 到目前为止&#xff0c;已经完成了对Nacos的一些基本使用和配置&#xff0c;接下来还需要了解一个非常重要的点&#xff0c;就是Nacos的集群相关的…

【芯片制造】【问题整理】明场检测和暗场检测

背景&#xff1a; 什么是明场检测和暗场检测 主要功能&#xff1a; 1、在明场检测中&#xff0c;光源直接照射到样品表面&#xff0c;透射光或反射光被收集并成像。样品上的颗粒、划痕、凹坑会改变光的反射和透射&#xff0c;形成对比&#xff0c;能够快速扫描大面积样品。 2、…