vue相关的开源项目

awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合。我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们。

如果收录的项目有错误,可以通过issue反馈给我们。这里的项目Star数不是实时更新的,一般是一周更新一次。

内容

UI组件

开发框架

实用库

服务端

  • nuxt.js ★4564 - 用于服务器渲染Vue app的最小化框架
  • unvue ★310 - 使用简单的通用VueJS应用
  • express-vue ★302 - 简单的使用服务器端渲染vue.js
  • vue-ssr ★92 - 非常简单的VueJS服务器端渲染模板
  • doubanMovie-SSR ★85 - Vue豆瓣电影服务端渲染
  • vue-ssr ★80 - 结合Express使用Vue2服务端渲染
  • vue-easy-renderer ★44 - Nodejs服务端渲染

辅助工具

应用实例

Demo示例

### 开源项目使用 Vue 3 构建的推荐 Vue 3 的发布带来了许多改进,包括性能优化、更好的 TypeScript 支持以及新增的 Composition API。由于这些优势,越来越多的开源项目开始采用 Vue 3 来构建现代前端应用。以下是一些值得参考的开源项目: 1. **VitePress** VitePress 是一个基于 Vite 和 Vue 的静态站点生成器,专为文档网站设计。它利用了 Vue 3 的响应式系统和轻量级特性,提供了快速的开发体验和高效的构建流程。 2. **Vue Router** Vue 官方的路由管理器 Vue Router 已经支持 Vue 3,并且其源码仓库中包含了大量示例项目,适合学习如何在实际项目中集成路由功能。 3. **Pinia** Pinia 是 Vue 的新一代状态管理库,专为 Vue 3 设计,提供了一种更简单、类型安全的方式来管理全局状态。它的官方文档和示例代码库是很好的实践资源。 4. **Element Plus** Element Plus 是一个基于 Vue 3 的 UI 组件库,广泛用于企业级后台管理系统。该项目不仅展示了 Vue 3 的组件化开发模式,还提供了丰富的交互组件和样式定制能力。 5. **Ant Design Vue** Ant Design Vue 是 Ant Design 的 Vue 实现版本,全面支持 Vue 3,并保持与原版一致的设计风格和组件体系。适用于需要复杂交互的企业级应用开发。 6. **Naive UI** Naive UI 是另一个针对 Vue 3 的高质量组件库,由个人开发者维护但功能完整,涵盖从基础表单控件到高级数据展示组件。该项目文档详尽,适合初学者和进阶者参考。 7. **Vueuse** Vueuse 是一个实用工具库,提供了大量基于 Composition API 的可复用函数,帮助开发者快速实现常见的业务逻辑(如响应式处理、事件监听等)。该项目本身结构清晰,适合学习 Vue 3 的高级用法。 8. **Vuelidate** Vuelidate 是一个轻量级的状态驱动验证库,专为 Vue 3 设计。它与 Composition API 紧密集成,简化了表单验证逻辑的编写过程。 9. **Vue Query** Vue Query 是一个用于管理远程数据查询的库,灵感来源于 React Query,专为 Vue 3 构建。它通过缓存机制、自动刷新等功能提升了数据获取效率。 10. **Vite + Vue 3 模板项目** Vite 提供了多种 Vue 3 的模板项目,用户可以通过简单的命令快速搭建开发环境。这些模板通常包含基本的项目结构、TypeScript 配置以及 ESLint/Prettier 等工具的集成[^1]。 #### 示例:使用 Vite 创建 Vue 3 项目的步骤 ```bash # 使用 Vite 创建 Vue 3 项目 npm create vite@latest my-vue-app --template vue # 进入项目目录并启动开发服务器 cd my-vue-app npm install npm run dev ``` 上述命令将创建一个基于 Vue 3 的项目,并启动本地开发服务器,默认访问地址为 `http://localhost:5173`。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值