【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…

基于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…

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

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

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; }但不推荐使…

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

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

金斗云 HKMP智慧商业软件 任意用户创建漏洞复现

0x01 产品简介 金斗云智慧商业软件是一款功能强大、易于使用的智慧管理系统,通过智能化的管理工具,帮助企业实现高效经营、优化流程、降低成本,并提升客户体验。无论是珠宝门店、4S店还是其他零售、服务行业,金斗云都能提供量身定制的解决方案,助力企业实现数字化转型和智…

12.x86游戏实战-汇编指令and or not

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 上一个内容&#xff1a;11.x86游戏实战-汇编指令add sub inc dec and指令是与的意思 or指令是或的意思 …

MUX VLAN实现二层流量的弹性管控

一、模拟场景&#xff0c;企业有一台服务器&#xff0c;部门A&#xff0c;部门B&#xff0c;访客 二、要求&#xff1a;三者都可以访问服务器&#xff0c;部门A和B可以进行部门内部通信&#xff0c;A和B不可以通信&#xff0c;访客只能访问服务器 三、拓扑如下图 四、配置流程…

Linux系统(Centos)下MySQL数据库中文乱码问题解决

问题描述&#xff1a;在进行数据库使用过程中&#xff0c;数据库里的数据中文都显示乱码。操作数据库的时候&#xff0c;会出现中文乱码问题。 解决方法如下&#xff1a; 第一步&#xff1a;打开虚拟机进入系统&#xff0c;启动MySQL。 第二步&#xff1a;连接登录MySQL输入…

执行力不足是因为选择模糊

选择模糊&#xff1a;执行力不足的根源 选择模糊是指在面对多个选项时&#xff0c;缺乏明确的目标和方向。这种模糊感会导致犹豫不决&#xff0c;进而影响我们的执行力。 选择模糊的表现&#xff1a; 目标不明确&#xff0c;不知道应该做什么。优先级混乱&#xff0c;不清楚…

分布式技术栈、微服务架构 区分

1.分布式技术栈 这些技术栈都是为了更好的开发分布式架构的项目。 &#xff08;大营销平台的系统框架如下图&#xff0c;扩展的分布式技术栈&#xff09; &#xff08;1&#xff09;Dubbo——分布式技术栈 DubboNacos注册中心是应用可以分布式部署&#xff0c;并且提供RPC接…

Codeforces Round 955 E. Number of k-good subarrays【分治、记忆化】

E. Number of k-good subarrays 题意 定义 b i t ( x ) bit(x) bit(x) 为 x x x 的二进制表示下 1 1 1 的数量 一个数组的子段被称为 k − g o o d k-good k−good 的当且仅当&#xff1a;对于这个子段内的每个数 x x x&#xff0c;都有 b i t ( x ) ≤ k bit(x) \leq k…

鸿蒙开发管理:【@ohos.account.distributedAccount (分布式帐号管理)】

分布式帐号管理 本模块提供管理分布式帐号的一些基础功能&#xff0c;主要包括查询和更新帐号登录状态。 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。开发前请熟悉鸿蒙开发指导文档&#xff…

自动化设备上位机设计 四

目录 一 设计原型 二 后台代码 一 设计原型 二 后台代码 using SimpleTCP; using SqlSugar; using System.Text;namespace 自动化上位机设计 {public partial class Form1 : Form{SqlHelper sqlHelper new SqlHelper();SqlSugarClient dbContent null;bool IsRun false;i…

论文翻译 | (DSP)展示-搜索-预测:为知识密集型自然语言处理组合检索和语言模型

摘要 检索增强式上下文学习已经成为一种强大的方法&#xff0c;利用冻结语言模型 (LM) 和检索模型 (RM) 来解决知识密集型任务。现有工作将这些模型结合在简单的“检索-读取”流程中&#xff0c;其中 RM 检索到的段落被插入到 LM 提示中。 为了充分发挥冻结 LM 和 RM 的…

# Sharding-JDBC 从入门到精通(9)- 综合案例(二)添加商品

Sharding-JDBC 从入门到精通&#xff08;9&#xff09;- 综合案例&#xff08;二&#xff09;添加商品 一、Sharding-JDBC 综合案例-添加商品-dao 1、在 shopping 子工程&#xff08;子模块&#xff09;中&#xff0c;创建 dao 接口类 ProductDao.java /*** dbsharding\sh…