|
4 | 4 | <a href="https://www.npmjs.com/package/vite-plugin-react-pages" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/vite-plugin-react-pages.svg" alt="npm package" /></a> |
5 | 5 | </p> |
6 | 6 |
|
7 | | -[vite-plugin-react-pages](https://vitejs.github.io/vite-plugin-react-pages) (vite-pages) 是一个由 [vite](https://github.com/vitejs/vite) 驱动的React应用程序框架。 它非常适合于以下场景: |
| 7 | +[vite-plugin-react-pages](https://vitejs.github.io/vite-plugin-react-pages)（vite-pages）是一个由[vite](https://github.com/vitejs/vite)驱动的React应用框架，非常适用于以下场景： |
8 | 8 |
|
9 | 9 | - 博客网站 |
10 | | -- 您的仓库库或产品的文档网站 |
11 | | -- 您的React组件或库的故事/演示/操场(如 [故事书](https://storybook.js.org/)) |
| 10 | +- 您的库或产品的文档网站 |
| 11 | +- 您的React组件或库的storybook/demo/本地开发调试环境（类似于[storybook.js](https://storybook.js.org/)） |
12 | 12 |
|
13 | | -它为开发者提供了许多特性： |
| 13 | +它提供了许多功能，帮助开发者**快速构建React应用**： |
14 | 14 |
|
15 | | -- **快速创建React项目**。 |
16 | | -- **极好的开发体验**。 即使有大量页面，也能在瞬间启动本地开发服务器。 热模块替换与 React 和 Mdx 配合使用，因此您在编辑代码时可以获得即时反馈。 |
17 | | -- **基于文件系统的路由**。通过遵循 [简单的文件系统路由约定](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 可以与任何项目文件结构一起工作。 |
18 | | -- **支持 Mdx**。您可以使用“普通 React”或 [Mdx](https://mdxjs.com/) 编写内容。普通 Reactjs 更灵活、更可组合。而 Mdx 更易读且更易于编辑。您可以选择适合您任务的适当格式。这些格式可以像普通的 esModules 一样相互导入。 |
19 | | -- **强大的主题定制功能**。 Vite-pages 本身不渲染任何具体的 DOM 节点。您可以使用主题定制页面的 **任何内容**。 很容易编写可共享和可配置的主题。如果您使用 TypeScript，您的主题的用户将获得类型检查和智能感知。 |
20 | | -- **基于页面的自动代码拆分**。访问者不需要下载整个应用程序，他们只需要按需加载页面数据。 |
21 | | -- **开箱即支持静态网站生成**。通过在构建时预渲染应用程序为HTML，用户可以在任何JS加载之前查看内容。有了这个功能，您可以将单页应用程序部署在[GitHub Pages](https://github.com/vitejs/vite-plugin-react-pages/tree/main/doc-site)上（它不支持单页应用程序）。 |
22 | | -- **库文档工具**。 Vite-pages 提供了 [一些工具](https://vitejs.github.io/vite-plugin-react-pages/library-documentation-tools) 来降低库作者的维护成本，并使他们的文档更易于阅读。 |
| 15 | +- **出色的开发体验**。即使有很多页面，也可以在瞬间启动本地开发服务器。热模块替换与React和Mdx兼容，因此在编辑代码时可以即时获得反馈。 |
| 16 | +- **基于文件系统的路由**。遵循[简单的文件系统路由约定](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可以与任何项目文件结构配合使用。 |
| 17 | +- **支持Mdx**。您可以使用“普通的React”或[Mdx](https://mdxjs.com/)编写内容。普通的React更灵活和可组合。而Mdx源码更可读、更容易编辑。您可以根据任务选择适当的格式。这些格式的内容可以像普通的ES Modules一样互相引用。 |
| 18 | +- **强大的[主题定制功能](https://vitejs.github.io/vite-plugin-react-pages/theme-customization)**。Vite-pages本身不渲染任何具体的DOM节点。您可以使用主题来自定义页面上的**任何内容**。编写可共享和可配置的主题非常容易。如果您使用typescript，使用主题的时候将获得类型检查和智能感知。 |
| 19 | +- **基于页面的自动代码拆分**。访问者无需下载整个应用程序，只需在需要时加载页面数据。 |
| 20 | +- **原生支持静态站点生成**。通过在构建时将应用程序预渲染为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&oq=github+pages+single+page+apps))。 |
| 21 | +- **用于库文档的工具**。Vite-pages提供了[一些工具](https://vitejs.github.io/vite-plugin-react-pages/library-documentation-tools)，以减少库作者的维护成本，并使他们的文档更容易阅读。 |
23 | 22 |
|
24 | | -## 快速开始 |
25 | 23 |
|
26 | | -### 在 StackBlitz 上进行在线体验 |
| 24 | +## 这个README的其他翻译版本 |
27 | 25 |
|
28 | | -您可以在浏览器中体验这些示例项目，无需在您的计算机上安装任何东西。 |
| 26 | +- [English](/README.md) |
29 | 27 |
|
30 | | -- [应用程序示例](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-app?file=README.md&terminal=dev) |
31 | | -- [库示例](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-lib?file=README.md&terminal=dev) |
32 | | -- [库单体仓库示例](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-lib-monorepo?file=README.md&terminal=dev) |
| 28 | +## 入门指南 |
33 | 29 |
|
34 | | -您可以通过 StackBlitz 在线体验这些示例项目，无需在您的计算机上安装任何东西。以上链接将带您进入相应的在线开发环境，并加载示例项目的源代码。在浏览器中打开链接后，您可以随时通过编辑器查看和编辑代码，并实时查看更改的效果。此外，您还可以使用内置的控制台来调试和运行代码。 |
35 | | -### 本地创建项目 |
| 30 | +### 在StackBlitz上在线体验 |
36 | 31 |
|
37 | | -1. 初始化一个 Vite Pages 项目（使用 npm 7+）： |
| 32 | +您可以在浏览器中体验这些示例项目，无需在本地安装任何东西！ |
38 | 33 |
|
39 | | -* 执行 `npm init vite-pages app-demo -- --template app` 初始化一个应用程序项目，或者 |
40 | | -* 执行 `npm init vite-pages library-demo -- --template lib` 初始化一个库项目，或者 |
41 | | -* 执行 `npm init vite-pages library-monorepo-demo -- --template lib-monorepo` 初始化一个带有 monorepo 设置的库项目。 |
42 | | -* 如果您使用的是 **npm 6.x**，应在 `--template` 之前删除额外的双破折号。例如，`npm init vite-pages app-demo --template app`。 |
| 34 | +- [应用开发](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-app?file=README.md&terminal=dev) |
| 35 | +- [库开发](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-lib?file=README.md&terminal=dev) |
| 36 | +- [monorepo库开发](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-lib-monorepo?file=README.md&terminal=dev) |
| 37 | + |
| 38 | +### 本地初始化演示项目 |
| 39 | + |
| 40 | +1. 初始化一个vite-pages项目（使用npm 7+）： |
| 41 | + - 执行`npm init vite-pages app-demo -- --template app`以初始化应用项目，或者 |
| 42 | + - 执行`npm init vite-pages library-demo -- --template lib`以初始化库项目，或者 |
| 43 | + - 执行`npm init vite-pages library-monorepo-demo -- --template lib-monorepo`以初始化带有monorepo设置的库项目。 |
| 44 | + - 如果您使用**npm 6.x**，`--template`前面的额外双短横线应该删除。例如，`npm init vite-pages app-demo --template app`。 |
43 | 45 | 2. `npm install` |
44 | | -3. `npm run dev` 然后在本地开发环境中使用。 |
45 | | -4. `npm run build`. |
46 | | -5. `npm run ssr`. 你可以 [在浏览器中禁用JavaScript](https://developer.chrome.com/docs/devtools/javascript/disable/), 以查看网页是否仍然可以渲染。 |
| 46 | +3. `npm run dev`并与本地开发环境互动。 |
| 47 | +4. `npm run build`。 |
| 48 | +5. `npm run ssr`。您可以[在浏览器中禁用javascript](https://developer.chrome.com/docs/devtools/javascript/disable/)，以验证它是否仍然可以渲染。 |
47 | 49 |
|
48 | 50 | ### 阅读文档 |
49 | 51 |
|
50 | | -阅读 [vite-plugin-react-pages的文档](https://vitejs.github.io/vite-plugin-react-pages/). |
| 52 | +阅读[vite-plugin-react-pages的文档](https://vitejs.github.io/vite-plugin-react-pages/)。 |
0 commit comments