+English | 简体中文 +
@@ -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.
diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 00000000..acf26fd2
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,169 @@
+
+ 
+
+English | 简体中文 +
+ +
+
+
+
+
+
+
+
+
+### 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)
+
+
+## 👨💻 贡献者
+
+
+ +English | 简体中文 +
-
+
- 💡 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 @@
+
+
+
+English | 简体中文 +
+ +
+
+
+
+
+
+
+
+
+### 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)
+
+
+## 👨💻 贡献者
+
+
+