{"id":13417477,"url":"https://github.com/vitejs/vite-plugin-react-pages","last_synced_at":"2025-04-08T10:27:44.820Z","repository":{"id":37962129,"uuid":"270730201","full_name":"vitejs/vite-plugin-react-pages","owner":"vitejs","description":"A vite framework for building react app. Especially suitable for document site and demos/playgrounds of react components.","archived":false,"fork":false,"pushed_at":"2024-08-06T17:44:59.000Z","size":4492,"stargazers_count":469,"open_issues_count":25,"forks_count":69,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-01T08:44:41.728Z","etag":null,"topics":["mdx","react","storybook","vite","vite-pages"],"latest_commit_sha":null,"homepage":"https://vitejs.github.io/vite-plugin-react-pages/","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/vitejs.png","metadata":{"files":{"readme":"README-CN.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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},"funding":{"github":"vitejs","open_collective":"vite"}},"created_at":"2020-06-08T15:56:26.000Z","updated_at":"2025-03-25T02:26:38.000Z","dependencies_parsed_at":"2023-02-19T20:31:10.425Z","dependency_job_id":"ae6a26ae-4539-4ef2-8bea-29804b01efcb","html_url":"https://github.com/vitejs/vite-plugin-react-pages","commit_stats":{"total_commits":657,"total_committers":16,"mean_commits":41.0625,"dds":"0.11111111111111116","last_synced_commit":"eafe89dfcd1815bf10301a32d199022a43ddab06"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitejs%2Fvite-plugin-react-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitejs%2Fvite-plugin-react-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitejs%2Fvite-plugin-react-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitejs%2Fvite-plugin-react-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vitejs","download_url":"https://codeload.github.com/vitejs/vite-plugin-react-pages/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608130,"owners_count":20965950,"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":["mdx","react","storybook","vite","vite-pages"],"created_at":"2024-07-30T22:00:37.863Z","updated_at":"2025-04-08T10:27:44.790Z","avatar_url":"https://github.com/vitejs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/vitejs","https://opencollective.com/vite"],"categories":["Plugins","TypeScript"],"sub_categories":["React","Plugins for frameworks other than Vue 3"],"readme":"# 📘 vite-plugin-react-pages\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-react-pages\" target=\"_blank\" rel=\"noopener\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vite-plugin-react-pages.svg\" alt=\"npm package\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[vite-plugin-react-pages](https://vitejs.github.io/vite-plugin-react-pages)（vite-pages）是一个由[vite](https://github.com/vitejs/vite)驱动的React应用框架，非常适用于以下场景：\n\n- 博客网站\n- 您的库或产品的文档网站\n- 您的React组件或库的storybook/demo/本地开发调试环境（类似于[storybook.js](https://storybook.js.org/)）\n\n它提供了许多功能，帮助开发者**快速构建React应用**：\n\n- **出色的开发体验**。即使有很多页面，也可以在瞬间启动本地开发服务器。热模块替换与React和Mdx兼容，因此在编辑代码时可以即时获得反馈。\n- **基于文件系统的路由**。遵循[简单的文件系统路由约定](https://vitejs.github.io/vite-plugin-react-pages/fs-routing)，创建、定位和开发页面变得轻而易举。您无需担心路由配置。对于复杂的使用场景，您可以[告诉vite-pages如何找到页面文件](https://vitejs.github.io/vite-plugin-react-pages/advanced-fs-routing)，以便vite-pages可以与任何项目文件结构配合使用。\n- **支持Mdx**。您可以使用“普通的React”或[Mdx](https://mdxjs.com/)编写内容。普通的React更灵活和可组合。而Mdx源码更可读、更容易编辑。您可以根据任务选择适当的格式。这些格式的内容可以像普通的ES Modules一样互相引用。\n- **强大的[主题定制功能](https://vitejs.github.io/vite-plugin-react-pages/theme-customization)**。Vite-pages本身不渲染任何具体的DOM节点。您可以使用主题来自定义页面上的**任何内容**。编写可共享和可配置的主题非常容易。如果您使用typescript，使用主题的时候将获得类型检查和智能感知。\n- **基于页面的自动代码拆分**。访问者无需下载整个应用程序，只需在需要时加载页面数据。\n- **原生支持静态站点生成**。通过在构建时将应用程序预渲染为HTML，用户可以在加载任何JS之前看到内容。有了这个功能，您可以[将您的单页应用程序部署到GitHub Pages](https://github.com/vitejs/vite-plugin-react-pages/tree/main/doc-site)(它本来[并不支持单页应用程序](https://www.google.com/search?q=github+pages+single+page+apps\u0026oq=github+pages+single+page+apps))。\n- **用于库文档的工具**。Vite-pages提供了[一些工具](https://vitejs.github.io/vite-plugin-react-pages/library-documentation-tools)，以减少库作者的维护成本，并使他们的文档更容易阅读。\n\n\n## 这个README的其他翻译版本\n\n- [English](/README.md)\n\n## 入门指南\n\n### 在StackBlitz上在线体验\n\n您可以在浏览器中体验这些示例项目，无需在本地安装任何东西！\n\n- [应用开发](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-app?file=README.md\u0026terminal=dev)\n- [库开发](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-lib?file=README.md\u0026terminal=dev)\n- [monorepo库开发](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-lib-monorepo?file=README.md\u0026terminal=dev)\n\n### 本地初始化演示项目\n\n1. 初始化一个vite-pages项目（使用npm 7+）：\n   - 执行`npm init vite-pages app-demo -- --template app`以初始化应用项目，或者\n   - 执行`npm init vite-pages library-demo -- --template lib`以初始化库项目，或者\n   - 执行`npm init vite-pages library-monorepo-demo -- --template lib-monorepo`以初始化带有monorepo设置的库项目。\n   - 如果您使用**npm 6.x**，`--template`前面的额外双短横线应该删除。例如，`npm init vite-pages app-demo --template app`。\n2. `npm install`\n3. `npm run dev`并与本地开发环境互动。\n4. `npm run build`。\n5. `npm run ssr`。您可以[在浏览器中禁用javascript](https://developer.chrome.com/docs/devtools/javascript/disable/)，以验证它是否仍然可以渲染。\n\n### 阅读文档\n\n阅读[vite-plugin-react-pages的文档](https://vitejs.github.io/vite-plugin-react-pages/)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitejs%2Fvite-plugin-react-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitejs%2Fvite-plugin-react-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitejs%2Fvite-plugin-react-pages/lists"}