7 个你应该了解的开源项目 - Vue 版 ✔️ [BONUS]

概览

大家好 👋🏼
这将是一篇与以往略有不同的文章：这次我不会讨论用某种语言编写的具体项目，而是会介绍一种源自某种语言的技术，这次是 JavaScript，而我要介绍的技术是 Vue.js，一个非常著名的前端框架（如果你想了解更多，可以看我专门为此主题写的系列文章 在这里 😉）
让我们开始吧 🤙🏼

---

1. Beer CSS

Beer CSS 是一个开源项目，具有许多超赞的功能，例如基于 Material Design 3，可以与任何 JS 框架一起使用，非常注重开发体验等 🍺

beercss / beercss

快速构建材料设计界面...无需让开发人员感到压力... 🍺💛

Beer CSS

快速构建材料设计界面...

...让开发人员无压力 🍺💛

干杯，www.beercss.com

赞助商

Beer CSS 是一个 MIT 许可的开源项目，其持续开发完全依赖于这些杰出赞助商和后援者的支持。如果您也希望加入他们，请考虑赞助 Beer CSS 的开发。

Open Collective 赞助商

GitHub 赞助者

为什么？

• 🥇 基于 Material Design 3 的首个 CSS 框架。
• ⬇️ 比其他基于 Material Design 的 CSS 框架小 10 倍。
• 🧙‍♂️ 将 Material Design 转换为 HTML 语义标准。
• 🤓 可与任何 JS 框架无缝配合使用。
• 🪄 极其注重开发体验。
• 🚫 无需构建步骤、配置或依赖项。
• ✨ 无需自定义 CSS 即可构建现代界面。

在 CSS 中应用 "啤酒方式"?

这个项目遵循了1516年创立的“德国啤酒纯净法”或“Reinheitsgebot”。该法律规定啤酒只能用以下原料酿造请提供需要翻译的具体内容。…

在 GitHub 上查看

2. Kongponents

Kongponents 是一个 Vue 组件库，包含常用 UI 元素。它们是为了解决 Kong 的应用需求而开发的，但通用性足够强，可以用于任何 web 应用程序 🦍

Kong / kongponents

🦍 Kong Vue 组件库

Kongponents

Kongponents 是一个 Vue 组件库，包含了一些常用的 UI 元素。它们是为了解决 Kong 的应用需求而开发的，但通用性足够强，可以用于任何 web 应用程序。

文档

Kongponents 文档 由 VitePress 提供支持，源代码可以在这里查看 here。

提交更改

此仓库使用约定提交信息。

Commitizen 和 Commitlint 用于帮助构建和强制执行提交消息。

强烈建议使用以下命令来创建您的提交：

    pnpm commit

进入全屏模式 退出全屏模式

这将触发 Commitizen 的交互式提示以构建您的提交消息。

强制提交格式

Lefthook 用于管理仓库中的 Git Hooks。会自动设置一个 commit-msg hook，以强制执行 commitlint 的提交消息规范，详见 lefthook.yaml。

在 GitHub 上查看

3. Dashy

Dashy 是一个开源的、高度可定制的、易于使用的、尊重隐私的仪表板应用。
包含状态检查、小部件、主题、图标包、UI 编辑器等众多功能！🤯

Lissy93 / Dashy

🚀 一个专为你打造的可自托管个人仪表盘。包含状态检查、小部件、主题、图标包、UI编辑器等众多功能！

Dashy

组织你的自托管服务，让它们从一个地方访问变得简单，Dashy 帮你实现这一点

用户展示 | 在线演示 | 快速上手 | 文档 | GitHub

Dashy 受到了 Umbrel 的慷慨赞助 —— 个人家用云和用于自托管的 OS

注意

版本 3.0.0 已发布，并且需要对您的设置进行一些更改，详情请参见 #1529。

目录

• 开始使用

• 🌈 功能

• ⚡ 演示

• 🚀 快速开始

• 🔧 配置

• 功能概览

• 🎨 主题

• 🧸 图标

• 🚦 状态指示器

• 📊 小部件

• 🔐 身份验证

• 👓 替代视图

• 🖱️ 打开方法

• 🔎 搜索和快捷键

• ⚙️ 配置编辑器

• ☁ 云备份与同步

• 🌎 语言切换

• 📃 多页面支持

• 社区

• 📊 系统要求

• 🙋‍♀️ 支持

• 💖 支持 Dashy

• 🏆 信用

• 🧱 开发

• 🗞️ 发布计划

• 📘 文档

• 🛣️ 路线图

• 🙌 替代方案

• 📜 许可证

特性 🌈

• 📃 支持多页
• 🚦 实时监控每个应用/链接的状态
• …

在 GitHub 上查看

4. Vuestic Admin

Vuestic Admin 是一个开源的、即用型的管理模板套件，旨在实现快速开发、易于维护和高可访问性。它基于 Vuestic UI、Vue 3、Vite、Pinia 和 Tailwind CSS 构建 🫠

epicmaxco / vuestic-admin

Vuestic Admin 是一个开源的、即用型的管理模板套件，旨在实现快速开发、易于维护和高可访问性。基于 Vuestic UI、Vue 3、Vite、Pinia 和 Tailwind CSS 构建。由 Epicmax (@epicmaxco) 维护。

免费且美观的Admin模板，利用Vue 3、Vite、Pinia和Tailwind CSS。设计用于构建高效、响应迅速且加载快速的管理界面。
由Epicmax开发。
基于Vuestic UI库

实时演示 | 关于 Vuestic Admin | Vuestic UI 文档

Vuestic Admin 是使用 Vuestic UI 构建的。查看我们的 问题 和 贡献指南，并加入我们的 Discord 服务器 讨论，帮助我们改进 Vuestic Admin 和 Vuestic UI 的体验。

快速开始

使用以下命令快速搭建新的Vuestic Admin或空的Vite或Nuxt项目，使用Vuestic UI。

    npm create vuestic@latest

进入全屏模式 退出全屏模式

安装Vuestic Admin后，运行npm install安装依赖，然后运行npm run dev启动本地开发服务器。

文档

文档、指南、示例和教程可在 ui.vuestic.dev 查找。

官方 Discord 服务器

在官方社区的 discord 服务器 上提问

功能

• Vue 3, Vite, Pinia 和 Tailwind CSS - 快速且高效…

在 GitHub 上查看

5. Tiny RDM

Tiny RDM 是一个轻量级的 Redis 桌面客户端，具有现代的用户界面。它支持在 Linux、Mac 和 Windows 上安装。它专为开发人员和运维工程师设计，使与 Redis 服务器的交互更加方便和愉快 🦾

tiny-craft / tiny-rdm

Tiny RDM (Tiny Redis Desktop Manager) - 一个现代化、多彩、超轻量的 Redis GUI 客户端，适用于 Mac、Windows 和 Linux。

Tiny RDM

English | 简体中文 | 日本語

Tiny RDM 是一个现代的轻量级跨平台 Redis 桌面管理器，适用于 Mac、Windows 和 Linux。

功能

• 极其轻量，基于 Webview2 构建，不内置浏览器（感谢 Wails）。
• 提供视觉友好、用户友好的界面，支持浅色和深色主题（感谢 Naive UI 和 IconPark）。
• 支持多语言（需要更多语言支持？点击这里贡献）。
• 更好的连接管理：支持 SSH Tunnel/SSL/Sentinel 模式/Cluster 模式/HTTP 代理/SOCKS5 代理。
• 可视化键值操作，支持 Lists、Hashes、Strings、Sets、Sorted Sets 和 Streams 的 CRUD 操作。
• 支持多种数据查看格式和解码/解压缩方法。
• 使用 SCAN 进行分段加载，方便列出数百万个键。
• 提供命令操作历史日志列表。
• 提供命令行模式。
• 提供慢日志列表。
• 提供 List/Hash/Set/Sorted Set 的分段加载和查询。
• 提供 List/Hash/Set/Sorted Set 的值解码/解压缩。
• 集成 Monaco Editor。
• 支持实时命令监控。
• 支持数据导入导出。
• 支持发布/订阅。
• 支持……

在 GitHub 上查看

6. PPTist

PPTist 是一个基于网页的演示应用。该应用复制了 Microsoft Office PowerPoint 中大多数常用功能。它支持各种基本元素类型，如文本、图片、形状、线条、图表、表格、视频、音频和公式。你可以在网页浏览器中直接编辑和展示幻灯片 👀

pipipi-pikachu / PPTist

一个在线演示应用，可以复制Microsoft Office PowerPoint中常用的大多数功能，允许在线编辑和展示PPT，并支持导出PPT文件。

简体中文 | English

🎨 PPTist

PowerPoint-ist（/'pauəpɔintist/），一个基于网页的演示文稿（幻灯片）应用程序。该应用程序复制了 Microsoft Office PowerPoint 中大多数常用功能。它支持各种基本元素类型，例如文本、图片、形状、线条、图表、表格、视频、音频和公式。您可以直接在网页浏览器中编辑和展示幻灯片。

在线试用👉：https://pipipi-pikachu.github.io/PPTist/

✨ 高亮

1. 易于开发：使用 Vue 3.x 和 TypeScript 构建，不依赖于 UI 组件库，并尽可能避免使用第三方组件。这使得样式自定义更加容易，功能扩展也更加方便。

2. 用户友好：提供无处不在的上下文菜单，数十个键盘快捷键以及无数的编辑细节优化，力求提供接近桌面应用程序级别的体验。

3. 功能丰富：支持 PowerPoint 中常用的大多数元素和功能，支持多种格式导出，并提供基本的移动端编辑和预览功能。

🚀

…

在 GitHub 上查看

7. Radix Vue

Radix Vue 是一个开源的 UI 组件库，用于构建高质量、可访问的设计系统和网页应用。
它是 Radix UI 的一个非官方的社区驱动的 Vue 版本 🕵️

radix-vue / radix-vue

Radix UI 原子组件的 Vue 版本。一个开源的 UI 组件库，用于构建高质量、可访问性的设计系统和 web 应用。

Radix Vue

一个非官方的 Vue 版本的 Radix UI。
Radix 是一个无样式、可自定义的 UI 库，内置了无障碍功能，用于构建高质量的设计系统。

参与进来！

文档 | 快速上手 | 示例 | 为什么选择 Radix Vue?

设计 by: icarusgkx, melkam

安装

    pnpm add radix-vue

进入全屏模式 退出全屏模式

    npm install radix-vue

进入全屏模式 退出全屏模式

    yarn add radix-vue

进入全屏模式 退出全屏模式

文档

对于完整文档，请访问 radix-vue.com。

发布版本

参见 发布版本 获取更新日志。

参与贡献

我们非常欢迎您的贡献！所有 PR 都是受欢迎的！我们需要帮助构建核心组件、文档、测试和故事！加入我们的 Discord，我们会帮助您快速上手！

开发环境设置

文档

1. 克隆仓库
2. 运行 pnpm i
3. 运行 pnpm build 以本地构建 radix-vue
4. 运行 pnpm docs:dev 以启动 vitepress
5. 打开 http://localhost:5173

包管理

1. 克隆仓库
2. 运行 pnpm i
3. 运行 pnpm story:dev 来启动 histoire (故事书)
4. 打开 http://localhost:6006

作者

• Khairul Haaziq
• Mujahid Anuar
• Zernonia

致谢

所有的功劳归…

在 GitHub 上查看

---

结论

这份列表列出了七个值得一看的开源项目，无论是使用它们还是贡献代码都挺不错🖖
祝你编码愉快！✨

---

你好👋🏻
我叫多梅尼科，是一名热爱 Vue.js 框架的软件开发者，我会写文章来分享我的知识和经验。
别忘了访问我的 Linktree 查看我的项目 🫰🏻

Linktree: https://linktr.ee/domenicotenace

在 dev.to 上关注我以阅读其他文章 👇🏻

多梅尼科·泰内斯 关注

热爱IT世界及其相关的一切 ✌🏻 对Vue和开源充满热情 🦠

如果你喜欢我的内容或想要支持我在 GitHub 上的工作，你可以通过小额捐赠来支持我。
我会非常感激 🥹