docs: vue supplement explanation (#2079)

docs/guide/vue-api-table.md

@@ -46,6 +46,10 @@ export default {
 };
 ```
 
+:::info
+若您的项目 Monorepo 项目， 默认的 tsconfigPath 为 `<project-root>/<directory>/tsconfig.json`。 `<project-root>` 为 Monorepo 项目目录； `<directory>` 则为子包`package.json` 中的 `repository.directory` 选项
+:::
+
 ## checkerOptions
 
 我们还可以通过 checkerOptions 选项来配置 Type Checker：
@@ -57,9 +61,7 @@ export default {
   plugins: ['@dumijs/preset-vue'],
   vue: {
     checkerOptions: {
-      schema: {
-        exclude: /src\/runtime\//,
-      },
+      exclude: /src\/runtime\//,
     },
   },
 };
@@ -74,12 +76,10 @@ export default {
   plugins: ['@dumijs/preset-vue'],
   vue: {
     checkerOptions: {
-      schema: {
-        externalSymbolLinkMappings: {
-          typescript: {
-            Promise:
-              'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise',
-          },
+      externalSymbolLinkMappings: {
+        typescript: {
+          Promise:
+            'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise',
         },
       },
     },

docs/guide/vue.md

@@ -44,7 +44,7 @@ export default {
   presets: ['@dumijs/preset-vue'],
   vue: {
     checkerOptions: {
-      schema: { ignore: ['InternalType'] },
+      ignore: ['InternalType'],
     },
   },
 };
@@ -58,7 +58,7 @@ export default {
   presets: ['@dumijs/preset-vue'],
   vue: {
     checkerOptions: {
-      schema: { exclude: [/node_modules/, /mylib/] },
+      exclude: [/node_modules/, /mylib/],
     },
   },
 };
@@ -68,7 +68,13 @@ export default {
 
 ### tsconfigPath
 
-TypeChecker 使用的 tsconfig，默认值为 `<project-root>/tsconfig.json`
+TypeChecker 使用的 tsconfig，默认值为 `<project-root>/<directory>/tsconfig.json`
+
+> 默认情况下，如果您的项目位于 Monorepo 中，则 `<project-root>` 为 Monorepo 项目目录；而 `<directory>` 则为 `package.json` 中的 `repository.directory` 选项
+
+## directory
+
+默认情况下，该选项是 `package.json` 中的 `repository.directory` 选项
 
 ### compiler
 

docs/plugin/market.md

@@ -9,6 +9,10 @@ toc: null
 
 阅读更多关于 [如何使用插件](./index.md#配置)，或 [如何编写属于你自己的插件](./new.md) 并与社区分享！
 
+## 官方插件
+
+- [**preset-vue**](https://github.com/umijs/dumi/tree/master/suites/preset-vue): Vue 插件，支持 Vue Demo 渲染及编辑，API Table 等
+
 ## 社区插件
 
 - [**color-chunk**](https://github.com/Wxh16144/dumi-plugin-color-chunk#readme): 美化内联代码颜色块儿 \`#f00\`。

docs/plugin/techstack.md

@@ -54,14 +54,15 @@ api.registerTechStack(() => VueSfcTechStack);
 
 ### runtimeOpts: 运行时配置
 
-有三个选项可供选择：
+有四个选项可供选择：
 
 ```ts
 {
   runtimeOpts: {
     compilePath: '...',
     rendererPath: '...',
     pluginPath: '...',
+    preflightPath: '...'
   },
 }
 
@@ -77,7 +78,10 @@ import { createApp } from 'vue';
 
 const renderer: IDemoCancelableFn = function (canvas, component) {
   const app = createApp(component);
-  app.config.errorHandler = (e) => console.error(e);
+  // 抛给 react 处理
+  app.config.errorHandler = (err) => {
+    throw err;
+  };
   app.mount(canvas);
   return () => {
     app.unmount();
@@ -115,6 +119,10 @@ const rendererPath = getPluginPath(api, 'renderer.mjs');
 
 得到的`rendererPath`我们就可以提供给 dumi 了。
 
+`preflightPath` 是和 `rendererPath` 配套的地址，在用户编辑 demo 时， dumi 会在组件被加载之前使用 preflight 进行预加载，并将发现的错误提示给用户。这能有效提升用户的编辑体验，请务必实现。
+
+`preflightPath`的提供方式和`rendererPath`如出一辙，这里就不赘述了。
+
 `compilePath`则是浏览器端 Vue 实时编译库所在地址，dumi 会在用户进行实时代码编辑时，通过
 
 ```ts
@@ -123,8 +131,6 @@ const { compile } = await import(compilePath);
 
 进行实时代码编译。
 
-`compilePath`的提供方式和`rendererPath`如出一辙，这里就不赘述了。
-
 在实际实现过程中，主要难度还是在于提供轻量的，浏览器端运行的编译器。
 
 常用的浏览器端编译器有[@babel/standalone](https://babeljs.io/docs/babel-standalone)，但其体积过大，使用时请谨慎。
@@ -183,8 +189,8 @@ API Table 的支持主要在于对框架元信息信息的提取，例如针对
 ```ts
 import { ILanguageMetaParser, IPatchFile } from 'dumi/tech-stack-utils';
 
-class VueMetaParser implements LanguageMetaParser {
-  async patch(file: PatchFile) {
+class VueMetaParser implements ILanguageMetaParser {
+  async patch(file: IPatchFile) {
     // ...
   }
   async parse() {