当前位置: 首页 > 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…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...