README.zh-CN.md

简体中文 | English

Zova

Zova 是一款更直观的前端框架，汲取 Vue3、React 和 Angular 的精华，用于开发优雅、快速、可靠的系统

与UI库的配合

Zova 可以搭配任何 UI 库使用，并且内置了几款 UI 库的项目模版，便于开箱即用，包括：

• antdv
• element-plus
• quasar
• vuetify
• empty：可以在此基础上使用其他 UI 库

在线演示

• vue3 + ts + tsx + tailwindcss + daisyui

文档

• 快速开始
• 为什么需要Vue3+IOC?

代码风格：Vue+React+Angular

Zova 汲取Vue3/React/Angular的精华，规避他们的缺点，让我们的开发体验更加优雅，减轻心智负担

1. Vue3：Zova 仍然使用 Vue3 便利的响应式系统，但是定义响应式变量就像原生变量一样，不需要使用ref/reactive，自然也不需要ref.value
2. React：Zova 在一个Render Class中通过tsx语法来书写渲染逻辑，不仅可以与 TS 类型系统完美契合，也可以支持渲染代码的拆分，即便是面对复杂业务也可以保持代码的舒展与优雅。在 Zova 中没有类似 React 的众多 hook api，大量减轻心智负担
3. Angular：在实际开发当中，会遇到三个场景的状态共享：组件内部状态共享、组件之间状态共享、全局状态共享。在传统的 Vue3 当中，分别采用不同的机制来实现，而在 Zova 中只需要采用统一的 IOC 容器机制即可。Zova 提供的 IOC 容器，摒弃了 Angular 繁琐的设计，概念更加清晰，功能更加强大

特性

• SSR：内置开箱即用的 SSR 解决方案，同时支持 B 端和 C 端应用
• 模块化体系：构建大型业务系统的基石
• IOC控制反转：业务抽象与建模的基石
• 模块Scope：基于依赖查找的访问策略
• 路由Query：带 TS 类型的路由
• Mock：更加便利的 Mock 机制
• 图标：UI 库无关的图标引擎
• CSS-in-JS: 样式&主题：基于TypeStyle的更加灵活的样式引擎
• Model: 统一数据源：基于Tanstack Query的数据管理策略
• Env环境变量：基于多维变量的 Env 文件加载策略

如何做

$ npm run init
$ cd ./zova-dev
$ npm run dev

如何做: ui-antdv

$ cd zova-ui-antdv
$ pnpm install
$ npm run dev

如何做: ui-element

$ cd zova-ui-element
$ pnpm install
$ npm run dev

如何做: ui-quasar

$ cd zova-ui-quasar
$ pnpm install
$ npm run dev

如何做: ui-vuetify

$ cd zova-ui-vuetify
$ pnpm install
$ npm run dev

如何做: ui-empty

$ cd zova-ui-empty
$ pnpm install
$ npm run dev

联系方式

• Twitter
• 微信

致谢

• 向 Angular 表达感谢，Angular 激发了在 Vue 中实现 ioc 容器的灵感
• 向 React 表达感谢，React 首创的 JSX 语法显著提升了前端的开发效率和开发体验
• 向 Vue 表达感谢，Vue 提供了非常强大的响应式系统和生态。如果没有这些生态的支持，Zova 的实现将非常困难

License

MIT

Copyright (c) 2016-present, Zova