From a1e59b8b0f8744f7c3efb5e65738adafa2c95b6a Mon Sep 17 00:00:00 2001 From: jahnli Date: Tue, 18 Jul 2023 16:31:07 +0800 Subject: [PATCH 1/4] feat: add cn docs --- README-zh_CN.md | 168 ++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 1 + 2 files changed, 169 insertions(+) create mode 100644 README-zh_CN.md diff --git a/README-zh_CN.md b/README-zh_CN.md new file mode 100644 index 00000000..7b57b8e5 --- /dev/null +++ b/README-zh_CN.md @@ -0,0 +1,168 @@ +

+ +

+

+Vue DevTools 预览 +

+ +[English](./README.md) | 简体中文 + + +

+ NPM Version + NPM Downloads + License +

+ +

+ 💡 想法 & 建议 | + 🗺️ 项目路线图 +

+ +

+ +

+ + +## 📖 介绍 + +`vite-plugin-vue-devtools` 是一个 Vite 插件，旨在增强 Vue 开发者体验。 + + + +## 🎉 特性 + +### Pages + +`Pages` 选项卡显示您当前的路线并提供快速导航的方法。对于动态路由，它还提供了一个表单来交互式地填写每个参数。您还可以使用文本框来播放和测试每条路线的匹配情况。 + + + + +### Components + +`Components` 选项卡显示您在应用程序和层次结构中使用的所有组件，您还可以选择它们来查看组件的详细信息（例如数据、属性）。 + + + +### Assets + +`Assets` 选项卡显示所有静态资产及其信息，您可以在浏览器中打开资产或下载它。 + + + +### Timeline + +`Timeline` 选项卡包含三个类别：性能、路由器导航和 Pinia，您可以在它们之间切换以查看状态变化和时间线。 + + + +### Routes + +`Routes` 选项卡是与 [Vue Router](https://github.com/vuejs/router) 集成的功能，允许您查看注册的路由及其详细信息。 + + + +### Pinia + +`Pinia` 选项卡是与 [Pinia](https://github.com/vuejs/pinia) 集成的功能，允许您查看注册的路由及其详细信息。 + + + +### Graph + +`Graph` 选项卡提供了显示组件之间关系的图表视图。 + + + +### Inspect + +`Inspect` 公开 [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) 集成，允许您检查 Vite 的转换步骤，了解每个插件如何改变您的代码并发现潜在问题可能会有所帮助。 + + + +### Inspector + +您还可以使用 `Inspector` 功能来检查 `DOM` 树并查看哪个组件正在渲染它，单击可转到特定行的编辑器，使更改变得更加容易，而无需彻底了解项目结构。 (该功能基于 [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector)) + + + +## 📦 安装 + +``` + +# vite-plugin-vue-devtools + +pnpm install vite-plugin-vue-devtools -D + +``` + +## 🦄 示例 + +### Vite 配置 + +```ts +import { defineConfig } from 'vite' +import VueDevTools from 'vite-plugin-vue-devtools' + +export default defineConfig({ + plugins: [ + VueDevTools(), + vue(), + ], +}) +``` + +### 选项 + +```ts +interface VitePluginVueDevToolsOptions { + /** + * append an import to the module id ending with `appendTo` instead of adding a script into body + * useful for projects that do not use html file as an entry + * + * WARNING: only set this if you know exactly what it does. + */ + appendTo?: string | RegExp +} +``` + +## 💡 注意 + +- 仅在 `开发模式` 下可用。 +- 仅支持 `Vue3.0+` 。 +- 目前仅支持单实例 `Vue` 应用程序（多实例支持即将推出）。 +- 不支持 `SSR` (如果您使用 `Nuxt` ，请使用 [nuxt/devtools](https://github.com/nuxt/devtools) directly). +- 该插件遵循 `Vue` 的 `DevTools` 配置，因此如果您配置了 `hide` 选项，它也将应用于该插件。例如 + + ```js + // This Vue instance will be ignored by the plugin. + createApp({ + render: () => h(App), + devtools: { + hide: true, + }, + }) + ``` + +## 📖 博客文章 + +- [介绍 Vue DevTools (Vite 插件)](https://gist.github.com/webfansplz/bc90a773a0dd474a34e043ab2d2a37a4) + +## 🌸 制作人员 + +- This project is highly inspired by [nuxt/devtools](https://github.com/nuxt/devtools). Kudos to Anthony Fu and Nuxt team for the awesome work! + +- [vuejs/devtools](https://github.com/vuejs/devtools) + + +## 👨‍💻 贡献者 + + + + + +## 📄 License + +[MIT LICENSE](./LICENSE) + diff --git a/README.md b/README.md index c4eadf95..4d501f9a 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ Vue DevTools Preview +English | [简体中文](./README-zh_CN.md)

NPM Version From 256f42c7f7add1cd89eb7d928c57cc860bb191e2 Mon Sep 17 00:00:00 2001 From: jahnli Date: Tue, 18 Jul 2023 16:33:48 +0800 Subject: [PATCH 2/4] feat: add ref --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 4d501f9a..20ac60dd 100644 --- a/README.md +++ b/README.md @@ -128,11 +128,11 @@ interface VitePluginVueDevToolsOptions { ## 💡 Notice -- Only available in development mode. -- Only support Vue3.0+. -- Currently only supports single-instance Vue applications (multi-instance support is coming soon). -- Doesn't support SSR (If you're using Nuxt, use [nuxt/devtools](https://github.com/nuxt/devtools) directly). -- The plugin follows Vue's DevTools configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g. +- Only available in `development mode`. +- Only support `Vue3.0+` . +- Currently only supports single-instance `Vue` applications (multi-instance support is coming soon). +- Doesn't support `SSR` (If you're using `Nuxt`, use [nuxt/devtools](https://github.com/nuxt/devtools) directly). +- The plugin follows `Vue's DevTools` configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g. ```js // This Vue instance will be ignored by the plugin. From 02d246079b536de7f3921843737e44b0300d64b0 Mon Sep 17 00:00:00 2001 From: jahnli Date: Tue, 18 Jul 2023 16:38:53 +0800 Subject: [PATCH 3/4] feat: supplementary document --- README-zh_CN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README-zh_CN.md b/README-zh_CN.md index 7b57b8e5..6437e248 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -132,7 +132,7 @@ interface VitePluginVueDevToolsOptions { - 仅在 `开发模式` 下可用。 - 仅支持 `Vue3.0+` 。 - 目前仅支持单实例 `Vue` 应用程序（多实例支持即将推出）。 -- 不支持 `SSR` (如果您使用 `Nuxt` ，请使用 [nuxt/devtools](https://github.com/nuxt/devtools) directly). +- 不支持 `SSR` (如果您使用 `Nuxt` ，请使用 [nuxt/devtools](https://github.com/nuxt/devtools))。 - 该插件遵循 `Vue` 的 `DevTools` 配置，因此如果您配置了 `hide` 选项，它也将应用于该插件。例如 ```js @@ -151,7 +151,7 @@ interface VitePluginVueDevToolsOptions { ## 🌸 制作人员 -- This project is highly inspired by [nuxt/devtools](https://github.com/nuxt/devtools). Kudos to Anthony Fu and Nuxt team for the awesome work! +- 该项目深受 [nuxt/devtools](https://github.com/nuxt/devtools) 的启发，感谢 `Anthony Fu` 和 `Nuxt` 团队的出色工作 - [vuejs/devtools](https://github.com/vuejs/devtools) From 17514fcfc985c6c720afafdd775c82482b35afcb Mon Sep 17 00:00:00 2001 From: webfansplz <308241863@qq.com> Date: Tue, 18 Jul 2023 19:06:03 +0800 Subject: [PATCH 4/4] chore: update --- README.md | 6 +- README-zh_CN.md => README.zh-CN.md | 25 +++-- packages/node/README.md | 21 ++-- packages/node/README.zh-CN.md | 169 +++++++++++++++++++++++++++++ scripts/copy-files.ts | 1 + 5 files changed, 199 insertions(+), 23 deletions(-) rename README-zh_CN.md => README.zh-CN.md (82%) create mode 100644 packages/node/README.zh-CN.md diff --git a/README.md b/README.md index 20ac60dd..85b952c7 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,9 @@ Vue DevTools Preview -English | [简体中文](./README-zh_CN.md) +

+English | 简体中文 +

NPM Version @@ -130,7 +132,7 @@ interface VitePluginVueDevToolsOptions { - Only available in `development mode`. - Only support `Vue3.0+` . -- Currently only supports single-instance `Vue` applications (multi-instance support is coming soon). +- Only supports single-instance `Vue` applications. - Doesn't support `SSR` (If you're using `Nuxt`, use [nuxt/devtools](https://github.com/nuxt/devtools) directly). - The plugin follows `Vue's DevTools` configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g. diff --git a/README-zh_CN.md b/README.zh-CN.md similarity index 82% rename from README-zh_CN.md rename to README.zh-CN.md index 6437e248..acf26fd2 100644 --- a/README-zh_CN.md +++ b/README.zh-CN.md @@ -5,8 +5,9 @@ Vue DevTools 预览 -[English](./README.md) | 简体中文 - +

+English | 简体中文 +

NPM Version @@ -26,7 +27,7 @@ Vue DevTools 预览 ## 📖 介绍 -`vite-plugin-vue-devtools` 是一个 Vite 插件，旨在增强 Vue 开发者体验。 +`vite-plugin-vue-devtools` 是一个旨在增强 Vue 开发者体验的Vite插件。 @@ -34,26 +35,26 @@ Vue DevTools 预览 ### Pages -`Pages` 选项卡显示您当前的路线并提供快速导航的方法。对于动态路由，它还提供了一个表单来交互式地填写每个参数。您还可以使用文本框来播放和测试每条路线的匹配情况。 +`Pages` 选项卡显示您当前的页面路由并提供快速导航的方法。对于动态路由，它还提供了一个表单来交互式地填写每个参数。您还可以使用文本框来测试每个路由的匹配情况。 ### Components -`Components` 选项卡显示您在应用程序和层次结构中使用的所有组件，您还可以选择它们来查看组件的详细信息（例如数据、属性）。 +`Components` 选项卡显示您应用程序的所有组件树，您还可以选择它们来查看组件的详细信息（例如数据、属性）。 ### Assets -`Assets` 选项卡显示所有静态资产及其信息，您可以在浏览器中打开资产或下载它。 +`Assets` 选项卡显示所有静态资源及其信息，您可以在浏览器中打开或下载它。 ### Timeline -`Timeline` 选项卡包含三个类别：性能、路由器导航和 Pinia，您可以在它们之间切换以查看状态变化和时间线。 +`Timeline` 选项卡包含三个类别：性能、路由导航和 Pinia，您可以在它们之间切换以查看状态变化和时间线。 @@ -65,13 +66,13 @@ Vue DevTools 预览 ### Pinia -`Pinia` 选项卡是与 [Pinia](https://github.com/vuejs/pinia) 集成的功能，允许您查看注册的路由及其详细信息。 +`Pinia` 选项卡是与 [Pinia](https://github.com/vuejs/pinia) 集成的功能，允许您查看注册的模块及其详细信息。 ### Graph -`Graph` 选项卡提供了显示组件之间关系的图表视图。 +`Graph` 选项卡提供了显示组件依赖关系的视图。 @@ -131,7 +132,7 @@ interface VitePluginVueDevToolsOptions { - 仅在 `开发模式` 下可用。 - 仅支持 `Vue3.0+` 。 -- 目前仅支持单实例 `Vue` 应用程序（多实例支持即将推出）。 +- 仅支持单实例 `Vue` 应用程序。 - 不支持 `SSR` (如果您使用 `Nuxt` ，请使用 [nuxt/devtools](https://github.com/nuxt/devtools))。 - 该插件遵循 `Vue` 的 `DevTools` 配置，因此如果您配置了 `hide` 选项，它也将应用于该插件。例如 @@ -145,11 +146,11 @@ interface VitePluginVueDevToolsOptions { }) ``` -## 📖 博客文章 +## 📖 博客 - [介绍 Vue DevTools (Vite 插件)](https://gist.github.com/webfansplz/bc90a773a0dd474a34e043ab2d2a37a4) -## 🌸 制作人员 +## 🌸 致谢 - 该项目深受 [nuxt/devtools](https://github.com/nuxt/devtools) 的启发，感谢 `Anthony Fu` 和 `Nuxt` 团队的出色工作 diff --git a/packages/node/README.md b/packages/node/README.md index f41ceadd..85b952c7 100644 --- a/packages/node/README.md +++ b/packages/node/README.md @@ -5,16 +5,19 @@ Vue DevTools Preview +

+English | 简体中文 +

NPM Version NPM Downloads - License + License

- 💡 Ideas & Suggestions | - 🗺️ Project Roadmap + 💡 Ideas & Suggestions | + 🗺️ Project Roadmap

@@ -127,11 +130,11 @@ interface VitePluginVueDevToolsOptions { ## 💡 Notice -- Only available in development mode. -- Only support Vue3.0+. -- Currently only supports single-instance Vue applications (multi-instance support is coming soon). -- Doesn't support SSR (If you're using Nuxt, use [nuxt/devtools](https://github.com/nuxt/devtools) directly). -- The plugin follows Vue's DevTools configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g. +- Only available in `development mode`. +- Only support `Vue3.0+` . +- Only supports single-instance `Vue` applications. +- Doesn't support `SSR` (If you're using `Nuxt`, use [nuxt/devtools](https://github.com/nuxt/devtools) directly). +- The plugin follows `Vue's DevTools` configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g. ```js // This Vue instance will be ignored by the plugin. @@ -156,7 +159,7 @@ interface VitePluginVueDevToolsOptions { ## 👨‍💻 Contributors - + diff --git a/packages/node/README.zh-CN.md b/packages/node/README.zh-CN.md new file mode 100644 index 00000000..acf26fd2 --- /dev/null +++ b/packages/node/README.zh-CN.md @@ -0,0 +1,169 @@ +

+ +

+

+Vue DevTools 预览 +

+ +

+English | 简体中文 +

+ +

+ NPM Version + NPM Downloads + License +

+ +

+ 💡 想法 & 建议 | + 🗺️ 项目路线图 +

+ +

+ +

+ + +## 📖 介绍 + +`vite-plugin-vue-devtools` 是一个旨在增强 Vue 开发者体验的Vite插件。 + + + +## 🎉 特性 + +### Pages + +`Pages` 选项卡显示您当前的页面路由并提供快速导航的方法。对于动态路由，它还提供了一个表单来交互式地填写每个参数。您还可以使用文本框来测试每个路由的匹配情况。 + + + + +### Components + +`Components` 选项卡显示您应用程序的所有组件树，您还可以选择它们来查看组件的详细信息（例如数据、属性）。 + + + +### Assets + +`Assets` 选项卡显示所有静态资源及其信息，您可以在浏览器中打开或下载它。 + + + +### Timeline + +`Timeline` 选项卡包含三个类别：性能、路由导航和 Pinia，您可以在它们之间切换以查看状态变化和时间线。 + + + +### Routes + +`Routes` 选项卡是与 [Vue Router](https://github.com/vuejs/router) 集成的功能，允许您查看注册的路由及其详细信息。 + + + +### Pinia + +`Pinia` 选项卡是与 [Pinia](https://github.com/vuejs/pinia) 集成的功能，允许您查看注册的模块及其详细信息。 + + + +### Graph + +`Graph` 选项卡提供了显示组件依赖关系的视图。 + + + +### Inspect + +`Inspect` 公开 [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) 集成，允许您检查 Vite 的转换步骤，了解每个插件如何改变您的代码并发现潜在问题可能会有所帮助。 + + + +### Inspector + +您还可以使用 `Inspector` 功能来检查 `DOM` 树并查看哪个组件正在渲染它，单击可转到特定行的编辑器，使更改变得更加容易，而无需彻底了解项目结构。 (该功能基于 [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector)) + + + +## 📦 安装 + +``` + +# vite-plugin-vue-devtools + +pnpm install vite-plugin-vue-devtools -D + +``` + +## 🦄 示例 + +### Vite 配置 + +```ts +import { defineConfig } from 'vite' +import VueDevTools from 'vite-plugin-vue-devtools' + +export default defineConfig({ + plugins: [ + VueDevTools(), + vue(), + ], +}) +``` + +### 选项 + +```ts +interface VitePluginVueDevToolsOptions { + /** + * append an import to the module id ending with `appendTo` instead of adding a script into body + * useful for projects that do not use html file as an entry + * + * WARNING: only set this if you know exactly what it does. + */ + appendTo?: string | RegExp +} +``` + +## 💡 注意 + +- 仅在 `开发模式` 下可用。 +- 仅支持 `Vue3.0+` 。 +- 仅支持单实例 `Vue` 应用程序。 +- 不支持 `SSR` (如果您使用 `Nuxt` ，请使用 [nuxt/devtools](https://github.com/nuxt/devtools))。 +- 该插件遵循 `Vue` 的 `DevTools` 配置，因此如果您配置了 `hide` 选项，它也将应用于该插件。例如 + + ```js + // This Vue instance will be ignored by the plugin. + createApp({ + render: () => h(App), + devtools: { + hide: true, + }, + }) + ``` + +## 📖 博客 + +- [介绍 Vue DevTools (Vite 插件)](https://gist.github.com/webfansplz/bc90a773a0dd474a34e043ab2d2a37a4) + +## 🌸 致谢 + +- 该项目深受 [nuxt/devtools](https://github.com/nuxt/devtools) 的启发，感谢 `Anthony Fu` 和 `Nuxt` 团队的出色工作 + +- [vuejs/devtools](https://github.com/vuejs/devtools) + + +## 👨‍💻 贡献者 + + + + + +## 📄 License + +[MIT LICENSE](./LICENSE) + diff --git a/scripts/copy-files.ts b/scripts/copy-files.ts index f1e80f2e..2b2acc4e 100644 --- a/scripts/copy-files.ts +++ b/scripts/copy-files.ts @@ -5,6 +5,7 @@ import { fileURLToPath } from 'node:url' // relative to scripts directory const destinations = [ ['../README.md', '../packages/node/README.md'], + ['../README.zh-CN.md', '../packages/node/README.zh-CN.md'], ] const _filename = fileURLToPath(import.meta.url)