docs: describe for vue tech stack

docs/config/index.md

@@ -98,6 +98,8 @@ export default () => '我会被编译，展示为组件';
 
 `resolveFilter` 配置项用于跳过指定原子资产的解析以提升性能。部分组件属性或函数签名存在多层嵌套，甚至是循环引用时，会导致解析结果巨大，此时可以通过该配置项跳过解析。
 
+上述配置是默认 React 解析器的配置， dumi 也提供方法覆盖原有解析器，具体可查看[API Table 支持](../plugin/techstack.md#api-table-支持)。
+
 ### autoAlias
 
 - 类型：`boolean`

docs/guide/vue-api-table.md

@@ -6,7 +6,7 @@ group:
 order: 2
 ---
 
-# Vue 的自动 API 表格
+# Vue 的自动 API 表格 <Badge>实验性</Badge>
 
 dumi 支持 Vue 组件的自动 API 表格生成，用户只需配置`entryFile`即可开始 API 表格的使用：
 
@@ -46,6 +46,51 @@ export default {
 };
 ```
 
+## checkerOptions
+
+我们还可以通过 checkerOptions 选项来配置 Type Checker：
+
+其中`exclude`选项默认会排除从 node_modules 中引用的所有类型，你还可以配置排除更多的目录：
+
+```ts
+export default {
+  plugins: ['@dumijs/preset-vue'],
+  vue: {
+    checkerOptions: {
+      schema: {
+        exclude: /src\/runtime\//,
+      },
+    },
+  },
+};
+```
+
+这样，`src/runtime/`目录下引用的所有接口都不会被检查。
+
+还有一个比较有用的选项则是`externalSymbolLinkMappings`，可以帮助我们配置外部接口的外链，例如：
+
+```ts
+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',
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+上述配置可以将 Promise 接口链接到 MDN 的参考文档。
+
+更多关于 checkerOptions 的选项请查看： [`MetaCheckerOptions`](https://github.com/umijs/dumi/tree/master/suites/dumi-vue-meta/README.md#metacheckeroptions)
+
 ## JSDoc 编写
 
 :::warning
@@ -91,38 +136,70 @@ defineComponent({
 });
 ```
 
-### @exposed/@expose
+### @component
+
+用以区分普通函数和函数组件的。目前无法自动识别为组件的情况有两种：
+
+```ts
+/**
+ * @component
+ */
+function InternalComponent(props: { a: string }) {
+  return h('div', props.a);
+}
+```
+
+```tsx | pure
+/**
+ * @component
+ */
+export const GenericComponent = defineComponent(
+  <T>(props: { item: T }) => {
+    return () => (<div>{item}</div>);
+  },
+);
+```
+
+都需要用`@component`注解，否则会被识别为函数
+
+### API 发行相关
+
+#### @public
+
+#### @deprecated
+
+#### @experimental/@beta
+
+#### @alpha
 
 :::warning
-组件实例的方法或是属性的暴露，必须使用@exposed/@expose 标识，单文件组件也不例外
+这些 release 标签在`defineEmits`中是无法生效
 :::
 
+对于组件实例本身暴露的方法，可以使用像`@public`这样的标签来公开
+
 ```ts
 defineExpose({
   /**
-   * @exposed
+   * @public
    */
   focus() {},
 });
 ```
 
-JSX/TSX 的组件方法暴露比较麻烦，需要用户另外声明
+如果将 MetaCheckerOptions 中的`filterExposed`设置为 false，这些发布标签将全部无效。
 
-```ts
-export default Button as typeof Button & {
-  new (): {
-    /**
-     * The signature of the expose api should be obtained from here
-     * @exposed
-     */
-    focus: () => void;
-  };
-};
-```
+> vue 的组件实例不仅会可以通过`expose`暴露属性和方法，还会暴露从外部传入的 props。
+
+### @ignore/@internal
 
-### @ignore
+标有`@ignore`或`@internal`的属性不会被检查。
 
-被`@ignore`标记的属性就会被忽略，不会被解析
+### 版本控制相关
+
+#### @version
+
+#### @since
 
 ## Markdown 编写
 
@@ -149,7 +226,11 @@ export default Button as typeof Button & {
 
 <API id="Button" type="events"></API>
 
-### Methods
+### Instance Methods
 
-<API id="Button" type="methods"></API>
+<API id="Button" type="imperative"></API>
 ```
+
+:::info
+imperative 类别是通过 release 标签暴露的组件实例方法
+::::

docs/guide/vue.md

@@ -6,7 +6,7 @@ group:
 order: 1
 ---
 
-# 安装 Vue 支持插件
+# 安装 Vue 支持插件 <Badge>实验性</Badge>
 
 dumi 中对 Vue 的支持主要通过`@dumijs/preset-vue`插件集实现, 目前只支持 Vue3
 
@@ -17,8 +17,9 @@ pnpm i vue
 pnpm i -D @dumijs/preset-vue
 ```
 
-> [!NOTE]
-> 如果您的 Vue 版本低于 3.3.6，请安装`@vue/compiler-sfc`
+:::warning
+如果您的 Vue 版本低于 3.3.6，请安装`@vue/compiler-sfc`
+:::
 
 ## 配置
 
@@ -63,6 +64,8 @@ export default {
 };
 ```
 
+关于 checkerOptions 更多的选项请查看： [`MetaCheckerOptions`](https://github.com/umijs/dumi/tree/master/suites/dumi-vue-meta/README.md#metacheckeroptions)
+
 ### tsconfigPath
 
 TypeChecker 使用的 tsconfig，默认值为 `<project-root>/tsconfig.json`

docs/plugin/api.md

@@ -93,7 +93,36 @@ api.modifyTheme((memo) => {
 
 ### registerTechStack
 
-注册其他技术栈，用于扩展 Vue.js、小程序等技术栈的 demo 编译能力，可参考内置的 [React 技术栈](https://github.com/umijs/dumi/tree/master/src/techStacks/react.ts) 实现。dumi 官方的 Vue.js 编译方案正在研发中，敬请期待。
+注册其他技术栈，用于扩展 Vue.js、小程序等技术栈的 demo 编译能力。如何添加一个完整的技术栈支持，可查看[添加技术栈](../plugin/techstack.md)。
+
+目前提供两种 API 实现技术栈：
+
+1. `defineTechStack` <Badge>推荐</Badge>
+
+```ts
+import { defineTechStack } from 'dumi/tech-stack-utils';
+const CustomTechStack = defineTechStack({
+  name: 'custom',
+  runtimeOpts: {
+    compilePath: '...',
+    rendererPath: '...',
+    pluginPath: '...',
+  },
+  isSupported(node, lang) {
+    return ['vue'].includes(lang);
+  },
+  onBlockLoad(args) {
+    // ...
+  },
+  transformCode(raw, opts) {
+    // ...
+  },
+});
+
+api.registerTechStack(() => CustomTechStack);
+```
+
+2. 直接实现 `IDumiTechStack`抽象类
 
 ```ts
 // CustomTechStack.ts