当前位置: 首页 > news >正文

使用 Vite 和 Vue 框架创建组件库

        在前端开发中,组件化开发已成为一种高效、可维护的方式。通过创建组件库,不仅可以提高代码复用率,还能方便地在不同项目之间共享组件。本文将详细介绍如何使用 Vite 和 Vue 框架创建一个组件库,并将其导出供其他项目使用。为保持一致性和避免潜在冲突,我们将使用 Yarn 作为包管理工具。

步骤 1:初始化项目

        首先,使用 Vite 初始化一个新的 Vue 项目。你可以使用以下命令:

yarn create vite my-vue-components --template vue
cd my-vue-components
yarn install
步骤 2:创建组件

        在 src/components 目录下创建你的组件。例如,创建一个名为 MyButton.vue 的组件:

<!-- src/components/MyButton.vue -->
<template><button :class="['my-button', { active: isActive }]" @click="handleClick"><slot></slot></button>
</template><script setup>
import { ref } from 'vue';const isActive = ref(false);
const handleClick = () => {isActive.value = !isActive.value;
};
</script><style scoped>
.my-button {padding: 10px 20px;font-size: 16px;cursor: pointer;
}.my-button.active {background-color: blue;color: white;
}
</style>
步骤 3:创建入口文件

        在 src 目录下创建一个入口文件 index.js 或 index.ts,用于导出你的组件。

// src/index.js
import MyButton from './components/MyButton.vue';const components = {MyButton,
};const install = (app) => {for (const name in components) {app.component(name, components[name]);}
};if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
}export default {install,...components,
};
步骤 4:配置 Vite

        配置 Vite 以构建库。在 vite.config.js 中添加以下配置:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({build: {lib: {entry: 'src/index.js',name: 'MyVueComponents',fileName: (format) => `my-vue-components.${format}.js`,},rollupOptions: {external: ['vue'],output: {globals: {vue: 'Vue',},},},},plugins: [vue()],
});
步骤 5:构建库

        运行以下命令来构建你的库:

yarn build

构建完成后,你会在 dist 目录下看到生成的库文件。

步骤 6:在其他项目中使用

        现在,你可以在其他 Vue 项目中使用这个组件库。

  1. 首先,安装构建好的库。你可以将库发布到 npm,或者本地链接。例如,如果你将库发布到 npm,你可以在其他项目中运行:
    yarn add my-vue-components

    或者,如果你使用本地链接,你可以运行:

    yarn link /path/to/my-vue-components/dist

    注意:本地链接到 dist 目录可能不是标准的做法,因为 dist 目录通常包含构建后的文件。在实际操作中,你可能想要链接到包含源代码的包目录,并在链接后运行构建命令。然而,为了演示目的,这里我们假设你已经有了构建好的文件。

  2. 然后,在你的 Vue 项目中导入并使用组件库:
    // main.js or main.ts
    import { createApp } from 'vue';
    import App from './App.vue';
    import MyVueComponents from 'my-vue-components'; // 或本地路径,如果本地链接了构建后的文件const app = createApp(App);
    app.use(MyVueComponents);
    app.mount('#app');
  3. 在你的组件中使用 MyButton
    <template><div><MyButton>Click Me</MyButton></div>
    </template>

总结

        通过以上步骤,你创建了一个简单的 Vue 组件库,并使用 Vite 和 Yarn 进行了构建和导出。你可以根据需要扩展这个库,添加更多的组件和功能。


新时代农民工 

相关文章:

使用 Vite 和 Vue 框架创建组件库

在前端开发中&#xff0c;组件化开发已成为一种高效、可维护的方式。通过创建组件库&#xff0c;不仅可以提高代码复用率&#xff0c;还能方便地在不同项目之间共享组件。本文将详细介绍如何使用 Vite 和 Vue 框架创建一个组件库&#xff0c;并将其导出供其他项目使用。为保持一…...

【数据结构学习笔记】19:跳表(Skip List)

介绍 跳表是一个能在 O ( n l o g n ) O(nlogn) O(nlogn)时间完成查找、插入、删除的数据结构&#xff0c;相比于树形结构优点就是很好写&#xff08;所以也用于实现Redis ZSet&#xff09;。其核心思想就是维护一个元素有序的&#xff0c;能随机提升索引层数的链表。最下面一…...

【8】深入理解 Go 语言中的协程-从基础到高级应用

文章目录 一、引言 &#x1f31f;二、协程基础概念 &#x1f9d0;&#xff08;一&#xff09;什么是协程&#xff08;二&#xff09;协程与线程、进程的区别三、协程的创建与启动 &#x1f680;&#xff08;一&#xff09;使用 go 关键字创建协程&#xff08;二&#xff09;简单…...

深入理解 ECMAScript 2024 新特性:字符串 isWellFormed 方法

ECMAScript 2024 引入了一个新的字符串实例方法&#xff1a;String.prototype.isWellFormed。这一新增功能是为了帮助开发者更容易地验证字符串是否为有效的 Unicode 文本。本文将详细介绍这一方法的使用场景、实现原理及其在实际应用中的价值。 String.prototype.isWellFormed…...

算法分析与设计之贪心算法

文章目录 前言一、Greedy Algorithms1.1 贪心选择性质1.2 最优子结构性质1.3 正确性证明 二、典型例题2.1 Interval Scheduling间隔调度2.2 Interval Partitioning最少间教室排课2.3 Selecting Breakpoints选择加油站停靠点2.4 硬币找零2.5 Scheduling to Minimizing Lateness2…...

Centos 宝塔安装

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 安装成功界面 宝塔说明文档 https://www.bt.cn/admin/servers#wcu 或者可以注册宝塔账号 1 快速部署 安装docker 之后 2 需要在usr/bin下下载do…...

蓝桥与力扣刷题(709 转换成小写字母)

题目&#xff1a;给你一个字符串 s &#xff0c;将该字符串中的大写字母转换成相同的小写字母&#xff0c;返回新的字符串。 示例 1&#xff1a; 输入&#xff1a;s "Hello" 输出&#xff1a;"hello"示例 2&#xff1a; 输入&#xff1a;s "here…...

Redis的过期策略、内存淘汰机制

Redis只能存5G数据&#xff0c;可是你写了10G&#xff0c;那会删5G的数据。怎么删的&#xff1f;还有&#xff0c;你的数据已经设置了过期时间&#xff0c;但是时间到了&#xff0c;为什么内存占用率还是比较高? 一、Redis的过期策略 Redis采用的是定期删除惰性删除策略。 1…...

视觉多模态大模型---MiniMax-vl-01---以闪电般的注意力缩放基础模型

简介 MiniMax-VL-01 是与今年1月15日由上海稀宇科技有限公司&#xff08;MiniMax&#xff09;发布并开源的一款视觉多模态大模型&#xff0c;它与基础语言大模型 MiniMax-Text-01 一同构成了 MiniMax-01 系列。这款模型的设计初衷是为了应对日益增长的长上下文处理需求&#x…...

【微服务】面试 3、 服务监控 SkyWalking

微服务监控的原因 问题定位&#xff1a;在微服务架构中&#xff0c;客户端&#xff08;如 PC 端、APP 端、小程序等&#xff09;请求后台服务需经过网关再路由到各个微服务&#xff0c;服务间可能存在多链路调用。当某一微服务挂掉时&#xff0c;在复杂的调用链路中难以迅速确定…...

【案例81】NMC调用导致数据库的效率问题

问题现象 客户在使用NC系统时&#xff0c;发现系统特别卡顿。需要紧急排查。 问题分析 排查NMC发现&#xff0c;所有的线程都处于执行SQL层面&#xff0c;说明数据库当前出现了异常。查看数据库资源状态发现&#xff0c;Oracle相关进程CPU利用率达到了100%。 查看现在数据库…...

Linux_信号

信号的概念 && 知识补充 信号是进程之间事件异步通知的一种方式&#xff0c;是一种软中断。 标准信号&#xff1a;编号为1-31之间都是标准信号&#xff0c;这些都是预定义信号&#xff0c;用于通知进程发生的各种事件。实时信号&#xff1a;编号从32开始起均是实时信号…...

LeetCode100之搜索二维矩阵(46)--Java

1.问题描述 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回…...

学员答疑:安卓分屏窗口的TouchableRegion设置流程追踪

背景&#xff1a; vip学员在群里问到了一个分屏触摸区域设置的问题&#xff0c;开始以为就是和普通Activity设置区域没啥差别,都是在InputMonitor中进行的设置&#xff0c;但是仔细研究下来其实并不是哈。本文就带大家来手把手分析一下分屏情况下的触摸区域是怎么设置的。 d…...

[cg] UE5 调试技巧

UE 中 rhi命令的提交是在render 线程&#xff0c;而graphics api 真正的执行是在rhi 线程&#xff0c; 今天想看下rhi的底层调用&#xff0c;但由于是通过task执行的&#xff0c;无法获取到render thread传入的地方&#xff0c;调试起来不太方便。 可通过开启下面的命令来调试 …...

Python Wi-Fi密码测试工具

Python Wi-Fi测试工具 相关资源文件已经打包成EXE文件&#xff0c;可双击直接运行程序&#xff0c;且文章末尾已附上相关源码&#xff0c;以供大家学习交流&#xff0c;博主主页还有更多Python相关程序案例&#xff0c;秉着开源精神的想法&#xff0c;望大家喜欢&#xff0c;点…...

Linux 创建用户

Linux 创建用户 创建用户 sudo useradd -m -s /bin/bash test - -m&#xff1a;自动创建家目录 /home/test - -s /bin/bash&#xff1a;指定默认的 shell 为 bash修改密码 # 修改密码 sudo passwd test删除用户 userdel -r zengshun - -r&#xff1a;把用户的主目录一起删…...

自建RustDesk服务器

RustDesk服务端 下面的截图是我本地的一个服务器做为演示用&#xff0c;你自行的搭建服务需要该服务器有固定的ip地址 1、通过宝塔面板快速安装 2、点击【安装】后会有一个配置信息&#xff0c;默认即可 3、点击【确认】后会自动安装等待安装完成 4、安装完成后点击【打开…...

Spring Boot Web技术栈(官网文档解读)

摘要 Spring Boot框架既支持传统的Servlet技术栈&#xff0c;也支持新兴的响应式&#xff08;Reactive&#xff09;技术栈。本篇文章将详细讲述Spring Boot 对两种技术栈的详细支持和使用。 Servlet 概述 基于Java Servlet API构建&#xff0c;它依赖于传统的阻塞I/O模型&…...

【llama_factory】qwen2_vl训练与批量推理

训练llama factory配置文件 文件&#xff1a;examples/train_lora/qwen2vl_lora_sft.yaml ### model model_name_or_path: qwen2_vl/model_72b trust_remote_code: true### method stage: sft do_train: true finetuning_type: lora lora_target: all### dataset dataset: ca…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...