docs(builder): extract doc fragment from Vue guide (#4679)

* docs(builder): extract doc fragment from Vue guide * docs: fix link
web-infra-dev · Sep 19, 2023 · 93e4a01 · 93e4a01
1 parent dff7960
commit 93e4a01
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 20 deletions.
diff --git a/packages/document/builder-doc/docs/en/guide/framework/vue2.mdx b/packages/document/builder-doc/docs/en/guide/framework/vue2.mdx
@@ -4,12 +4,9 @@ Although the Modern.js framework is built on React, the underlying Modern.js Bui
 
 In this document, you will learn how to build a Vue 2 application using Modern.js Builder.
 
-## Example Project
+import Vue2Project from '@en/shared/vue2Project.md';
 
-We have created an example project based on Vue 2 and Modern.js Builder. You can build your own project by referring this project, or just cloning it as a template. The following documentation will provide more detailed instructions.
-
-- [modern-js-examples - builder-vue2](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue2)
-- [modern-js-examples - builder-vue2-rspack](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue2-rspack)
+<Vue2Project />
 
 import CliToolVue from '@en/shared/cliToolVue.md';
 

diff --git a/packages/document/builder-doc/docs/en/guide/framework/vue3.mdx b/packages/document/builder-doc/docs/en/guide/framework/vue3.mdx
@@ -4,12 +4,9 @@ Although the Modern.js framework is built on React, the underlying Modern.js Bui
 
 In this document, you will learn how to build a Vue 3 application using Modern.js Builder.
 
-## Example Project
+import Vue3Project from '@en/shared/vue3Project.md';
 
-We have created an example project based on Vue 3 and Modern.js Builder. You can build your own project by referring this project, or just cloning it as a template. The following documentation will provide more detailed instructions.
-
-- [modern-js-examples - builder-vue3](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue3)
-- [modern-js-examples - builder-vue3-rspack](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue3-rspack)
+<Vue3Project />
 
 import CliToolVue from '@en/shared/cliToolVue.md';
 

diff --git a/packages/document/builder-doc/docs/en/shared/vue2Project.md b/packages/document/builder-doc/docs/en/shared/vue2Project.md
@@ -0,0 +1,6 @@
+## Example Project
+
+We have created an example project based on Vue 2 and Modern.js Builder. You can build your own project by referring this project, or just cloning it as a template. The following documentation will provide more detailed instructions.
+
+- [modern-js-examples - builder-vue2](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue2)
+- [modern-js-examples - builder-vue2-rspack](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue2-rspack)
diff --git a/packages/document/builder-doc/docs/en/shared/vue3Project.md b/packages/document/builder-doc/docs/en/shared/vue3Project.md
@@ -0,0 +1,6 @@
+## Example Project
+
+We have created an example project based on Vue 3 and Modern.js Builder. You can build your own project by referring this project, or just cloning it as a template. The following documentation will provide more detailed instructions.
+
+- [modern-js-examples - builder-vue3](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue3)
+- [modern-js-examples - builder-vue3-rspack](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue3-rspack)
diff --git a/packages/document/builder-doc/docs/zh/guide/framework/vue2.mdx b/packages/document/builder-doc/docs/zh/guide/framework/vue2.mdx
@@ -4,12 +4,9 @@
 
 在这篇文档中，你可以了解到如何基于 Modern.js Builder 来构建一个 Vue 2 应用。
 
-## 示例项目
+import Vue2Project from '@zh/shared/vue2Project.md';
 
-我们搭建了一个基于 Modern.js Builder 的 Vue 2 示例项目，你可以参考或直接克隆这个项目，并对照下文的指南来了解更多细节。
-
-- [modern-js-examples - builder-vue2](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue2)
-- [modern-js-examples - builder-vue2-rspack](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue2-rspack)
+<Vue2Project />
 
 import CliToolVue from '@zh/shared/cliToolVue.md';
 

diff --git a/packages/document/builder-doc/docs/zh/guide/framework/vue3.mdx b/packages/document/builder-doc/docs/zh/guide/framework/vue3.mdx
@@ -4,12 +4,9 @@
 
 在这篇文档中，你可以了解到如何基于 Modern.js Builder 来构建一个 Vue 3 应用。
 
-## 示例项目
+import Vue3Project from '@zh/shared/vue3Project.md';
 
-我们搭建了一个基于 Modern.js Builder 的 Vue 3 示例项目，你可以参考或直接克隆这个项目，并对照下文的指南来了解更多细节。
-
-- [modern-js-examples - builder-vue3](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue3)
-- [modern-js-examples - builder-vue3-rspack](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue3-rspack)
+<Vue3Project />
 
 import CliToolVue from '@zh/shared/cliToolVue.md';
 

diff --git a/packages/document/builder-doc/docs/zh/shared/vue2Project.md b/packages/document/builder-doc/docs/zh/shared/vue2Project.md
@@ -0,0 +1,6 @@
+## 示例项目
+
+我们搭建了一个基于 Modern.js Builder 的 Vue 2 示例项目，你可以参考或直接克隆这个项目，并对照下文的指南来了解更多细节。
+
+- [modern-js-examples - builder-vue2](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue2)
+- [modern-js-examples - builder-vue2-rspack](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue2-rspack)
diff --git a/packages/document/builder-doc/docs/zh/shared/vue3Project.md b/packages/document/builder-doc/docs/zh/shared/vue3Project.md
@@ -0,0 +1,6 @@
+## 示例项目
+
+我们搭建了一个基于 Modern.js Builder 的 Vue 3 示例项目，你可以参考或直接克隆这个项目，并对照下文的指南来了解更多细节。
+
+- [modern-js-examples - builder-vue3](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue3)
+- [modern-js-examples - builder-vue3-rspack](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/builder-vue3-rspack)