{"id":15021440,"url":"https://github.com/viewfly/viewfly","last_synced_at":"2025-04-05T00:06:28.836Z","repository":{"id":170711535,"uuid":"646498675","full_name":"viewfly/viewfly","owner":"viewfly","description":"一个简单、易上手的前端框架。性能出色，使用灵活，拥有极其精简并符合直觉的 API，可以帮助你更高效的构建富交互的用户界面。","archived":false,"fork":false,"pushed_at":"2025-04-02T07:07:47.000Z","size":781,"stargazers_count":67,"open_issues_count":0,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T08:22:32.641Z","etag":null,"topics":["framework","frontend","jsx","library","signal","viewfly"],"latest_commit_sha":null,"homepage":"https://viewfly.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/viewfly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-28T15:38:40.000Z","updated_at":"2025-03-29T01:52:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"bf770fdb-b349-40b9-9fb7-23355f978a0c","html_url":"https://github.com/viewfly/viewfly","commit_stats":{"total_commits":338,"total_committers":5,"mean_commits":67.6,"dds":"0.035502958579881616","last_synced_commit":"bd0b997b137633ec7d749f6dca402eee7b3f7cb0"},"previous_names":["viewfly/viewfly"],"tags_count":126,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewfly%2Fviewfly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewfly%2Fviewfly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewfly%2Fviewfly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewfly%2Fviewfly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viewfly","download_url":"https://codeload.github.com/viewfly/viewfly/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266563,"owners_count":20910836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","frontend","jsx","library","signal","viewfly"],"created_at":"2024-09-24T19:56:34.763Z","updated_at":"2025-04-05T00:06:28.805Z","avatar_url":"https://github.com/viewfly.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e\u003cimg src=\"./_source/logo.svg\" alt=\"Viewfly\" width=\"60px\" align=\"center\"\u003e Viewfly\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e🚀 一个简单、易上手、数据驱动的前端框架。\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/build-passing-green\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/%40viewfly%2Fcore\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dm/%40viewfly/core\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/coverage-100%25-blue\"\u003e\n\u003c/p\u003e\n\n为什么要开发 Viewfly？现在前端开发基本都围绕三大框架，也有一些更多的新星框架在圈内引起了大量关注，要在这种基础之上再推陈出新，无疑是非常困难的事情。\n\n不过，它们都太复杂了，有的创建组件要写很多样板代码，有的需要特殊的语法或编译，有的不方便与 TypeScript 集成，有的有闭包陷阱等等。这给了 Viewfly 推出的契机。\n\n我们要的是**简单、简单、还是简单！**\n\n\n## 官方文档\n\n[viewfly.org](https://viewfly.org)\n\n## 安装\n\n### 通过 cli 安装\n\n```\nnpm install @viewfly/cli -g\n```\n在命令行输入如下命令，创建一个新的 Viewfly 项目\n```\nviewfly new myApp\n```\n\n### 通过 npm 直接安装\n```\nnpm install @viewfly/core @viewfly/platform-browser\n```\n选择手动安装，如果使用 ts-loader 编译，需要在 tsconfig.json 中添加 tsx 编译配置项。\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"@viewfly/core\"\n  }\n}\n```\n如果使用 webpack + babel 编译，需要添加如下配置\n\n```js\n{\n  loader: 'babel-loader',\n  options: {\n    presets: [\n      [\"@babel/preset-env\"],\n      [\n        \"@babel/preset-react\",\n        {\n          runtime: \"automatic\",\n          importSource: \"@viewfly/core\"\n        }\n      ]\n    ],\n  }\n}\n```\n## 创建应用\n\n在 DOM 中准备好一个空的标签\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n```\n创建应用\n\n```tsx\nimport { createSignal } from '@viewfly/core'\nimport { createApp } from '@viewfly/platform-browser'\n\nconst count = createSignal(0)\n\nfunction App() {\n  return () =\u003e \u003cdiv\u003e{count()}\u003c/div\u003e\n}\n\nsetInterval(() =\u003e count.set(count() + 1), 1000)\n\ncreateApp(\u003cApp/\u003e).mount(document.getElementById('app'))\n```\n\n## Viewfly 的特点\n\n+ **函数组件**： Viewfly 全面拥抱函数，简单易学\n+ **独立 Hook**： createSignal、watch、createRef 等一系列勾子函数均和组件无关，可独立使用\n+ **性能优异**： 在 js-framework-benchmark 基准测试中，性能超过 React 和 Angular\n+ **上手简单**： Viewfly 没有 hook 规则，没有闭包陷阱，完全符合直觉\n+ **支持 IoC**： 支持完整的依赖注入能力，更方便做架构分形和单元测试\n+ **类型安全**： Viewfly 完全用 TypeScript 开发，没有任何自创语法或黑魔法\n+ **轻量**： Core + Browser 模块 minify + gzip 只有 8 KB\n\n## Viewfly 总览\n\n+ `@viewlfy/core`： Viewfly 内核\n+ `@viewfly/platform-browser`：浏览器支持层，用于在浏览器创建应用\n+ `@viewfly/router`：用于在浏览器中创建单页应用的路由导航\n+ `@viewfly/scoped-css`：支持组件级作用域 css\n+ `@viewfly/hooks`：扩展 hooks 包，提供了一些方便开发的实用工具集\n+ `@viewfly/cli`：用于创建 Viewfly 项目的脚手架\n+ `@viewfly/devtools`：适用于 Viewfly 的辅助开发工具\n\n## 赞助\n\n如果你愿意支持 Viewfly 的发展，同时鼓励我们做的更好，欢迎通过下面的二维码表达你的支持\n\n![](./_source/wx.jpg) ![](./_source/alipay.jpg)\n\n## License\n\nViewfly 遵循 MIT 开源协议。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviewfly%2Fviewfly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviewfly%2Fviewfly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviewfly%2Fviewfly/lists"}