vite组件库（vue版本）

最新推荐文章于 2024-07-10 08:30:00 发布
最新推荐文章于 2024-07-10 08:30:00 发布
阅读量143 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33332184/article/details/129437336
版权
niuyueyang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 vite 搭建组件库、全量打包组件库的实践过程
Lyrelion的博客
03-25 9392
使用 vite 搭建组件库、全量打包组件库的实践过程
vue3+vite 组件打包
04-16
Vue3 是 Vue.js 框架的最新版本，带来了许多性能优化和新特性，如Composition API，而 Vite 是由 Vue.js 作者尤雨溪开发的新型构建工具，以其快速的开发服务器启动和热模块替换（HMR）而受到青睐。 **Vue3 知识点：...
使用Vite构建Vue3组件库
咚の窝
07-13 6645
自从使用上vite和vue3后就爱不释手了，vite的秒级启动速度属实香，再加上vue3的CompositionAPI和setup语法糖的使用简便性，工作中新项目已经开始用这一套了。而且现在vite和vue3的第三方生态支持已经很好了（ps：可能还有些库不太兼容），所以打算借着这个机会再熟悉一下搭建与发布npm库的流程，之前基于vue-cli搭建过基于vue2的组件库vue-starry-sky，顺便也记录了一下搭建流程。所以打算升级一下这个库，使用vite和vue3来构建新的vue3-starry-sky
Vue3 + Vite 构建组件库发布到 npm
白雾茫茫丶
04-09 2149
这篇文章介绍了如何使用Vite构建组件库，并将其发布到npm上。文章包括搭建项目、调整目录结构、组件开发、整合并导出组件、编写package.json文件、vite打包配置、本地模拟、发布到npm、安装验证等步骤。文章还提供了一个基于Vue3+Element-plus封装的Table组件的示例，演示了如何运行和使用发布的组件。
vue3+vite+ts搭建组件库
这魏先森-forguo
09-03 6599
如果你还没用过vite、vue3、typescript， 那快来，使用vite+typescript+vue3搭建你的组件库， 一起卷起来
Vite+Vue3 开发UI组件库并发布到npm
单眼皮丶儿的博客
07-31 1974
一直对开源UI组件库比较感兴趣，摸索着开发了一套，虽然还只是开始，但是从搭建到发布这套流程基本弄明白了，现在分享给大家，希望对同样感兴趣的同学有所帮助。目前我的这套名为hasaki-ui的组件库仅有两个组件，大致成果如下，后续有时间会继续完善。该项目采用的技术栈为Vite + Vue3，还使用了一些基本的Markdown知识，阅读本文档前，希望你至少对vue有些基础，那么我们正式开始。
vite打包vue组件库
weixin_42568878的博客
03-31 3972
本文讲的不是一步步搭建项目，然后如何规划好项目结构，文件夹命名等等，而是从一个整体中剥离出组件库。首先我们的项目不是一开始就规划好了之后如何打包，都是一步步趟坑趟过来的，所以一开始的时候，我们是直接clone vue3的模板，然后就开搞了，中间我们还加了i18n、tailwind、多终端样式等等各种玩意，所以整个项目的components，views，api等等就都在一起，这是本文跟那些其他教程不一样的地方，然后，就是目前任务，拆分项目打包vue组件库。
《Vite 基础知识》基于 Vite 的组件库框架搭建
前端技术
02-02 589
《Vite 基础知识》基于 Vite 的组件库框架搭建
项目记录：使用vue3、vite打包组件库
L807301075的博客
08-25 1714
vite.config配置、package配置、vite打包配置、组件库
Vue2.7 + Vite3.2 + Rollup 组件库开发指南
前端攻城狮
08-23 1287
基于 Vue2.7 + Vite3.2 + Rollup 搭建 Vue 组件库，沉淀通用和业务组件，提高开发效率
使用vite构建Vue3组件库，发布npm包
热门推荐
y227766的博客
08-19 1万+
在国内用vue框架开发的是非常之多的，使用vue开发组件封装是一个很普片的事情了，封装好一个组件可以在项目的任意地方去使用，我们还可以从npm仓库下载别人封装的组件进行使用，比如element-ui,vant等组件库，但是由于不同的公司，不同的网站风格，是我们在开发中还是得自己封装自己的组件，要想在不同项目上使用自己封装的组件，不可能去旧项目复制组件代码到新的项目里面去。标签，也可以不用setup语法糖，还可以使用插件解决，这里就不说是什么插件了，首先我们在打包好的muk-ui目录下，打开终端，然后执行。
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
而 `import.meta.glob` 是 Vite 提供的一个强大特性，用于动态导入资源，尤其是适用于处理 Vue 组件的动态导入。 `import.meta.glob` 是 Vite 的一个元信息对象，它可以用来动态导入项目中的所有匹配指定模式的文件...
vite2 + vue3构建多页应用-源码demo
10-15
Vue3 提供了更加高效、模块化和可扩展的组件系统，而Vite2则是一款由Vue.js作者尤雨溪开发的新型构建工具，它利用了ES模块的原生加载能力，大大提升了开发时的性能。本项目“vite2 + vue3构建多页应用-源码demo”将...
vite-vue3-template:Vite + Vue3项目模板
03-18
Vue 3则是Vue.js的最新版本，带来了许多优化和新功能，如Composition API、Suspense组件和 teleport 等。 Vue 3 的核心改进： 1. **Composition API**：Vue 3 引入了Composition API，这是一种将逻辑分解为可重用...
基于vue3的炫酷风格ui组件库
11-20
基于vue3的炫酷风格ui组件库。基于vue3的炫酷ui组件库 特点：活力性 可玩性 原子性 组件库使用方式参考elementUI 使用 # npm npm install viog-ui #yarn yarn add viog-ui 特殊标注样式属性请添加前缀--vi-组件...
vue详解
m0_46702681的博客
07-08 1164
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
vue + element ui 实现侧边栏导航栏折叠收起
爱敲代码的卡拉米的博客
07-08 430
通过 row 和 col 组件，并通过 col 组件的。属性我们就可以自由地组合布局。
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1170
vue切换主题
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
最新发布
m0_68271787的博客
07-10 629
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
vite 4 开发vue3组件库打包配置
06-07
Vite 4 是一个快速的构建工具，可以用于开发 Vue 3 组件库。以下是一个基本的打包配置示例： ```js // vite.config.js import vue from '@vitejs/plugin-vue' export default { plugins: [vue()], build: { lib: { entry: 'src/main.js', // 组件库的入口文件 name: 'MyComponent', // 组件库的名称 fileName: format => `my-component.${format}.js` // 打包后文件的名称 }, rollupOptions: { // external 外部依赖的声明 external: ['vue'], output: { // globals 全局变量的声明 globals: { vue: 'Vue' } } } } } ``` 上面的配置将会把 Vue 组件库打包成一个 UMD 格式的 JavaScript 文件，可以通过 script 标签引入，也可以通过 import 引入。其中，`lib.entry` 指定了组件库的入口文件，`lib.name` 指定了组件库的名称，`lib.fileName` 指定了打包后文件的名称。 在 `build.rollupOptions` 中，`external` 指定了组件库的外部依赖，这里只有一个 Vue；`globals` 指定了组件库的全局变量声明，这里将 Vue 指定为全局变量。 需要注意的是，如果组件库中使用了一些 Vue 的插件或者第三方库，需要在 `build.rollupOptions.external` 中声明这些依赖。如果不声明会导致打包后的文件中包含这些依赖的代码，从而增加文件体积。 除了上面的基本配置，还可以根据具体项目的需求进行更高级的配置，例如压缩文件体积、生成 source map 等。具体的配置项可以参考 Vite 的文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值