-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feature/2.3.0' into wuxh/feature-code-group
# Conflicts: # package.json # pnpm-lock.yaml # src/client/theme-default/builtins/SourceCode/index.tsx
- Loading branch information
Showing
175 changed files
with
49,307 additions
and
4,180 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
/dist | ||
/compiled | ||
/theme-default | ||
/suites/*/compiled | ||
/suites/preset-vue/lib |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,9 @@ | ||
module.exports = { | ||
extends: require.resolve('@umijs/lint/dist/config/eslint'), | ||
rules: { | ||
'@typescript-eslint/no-unused-vars': [ | ||
'error', | ||
{ ignoreRestSiblings: true }, | ||
], | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,3 +17,4 @@ | |
/target | ||
/compiled/crates | ||
.swc | ||
/server |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,155 @@ | ||
--- | ||
title: 自动 API 表格 | ||
group: | ||
title: 使用vue | ||
order: 1 | ||
order: 2 | ||
--- | ||
|
||
# Vue 的自动 API 表格 | ||
|
||
dumi 支持 Vue 组件的自动 API 表格生成,用户只需配置`entryFile`即可开始 API 表格的使用: | ||
|
||
```ts | ||
import { defineConfig } from 'dumi'; | ||
|
||
export default defineConfig({ | ||
resolve: { | ||
// 配置入口文件路径,API 解析将从这里开始 | ||
entryFile: './src/index.ts', | ||
}, | ||
}); | ||
``` | ||
|
||
## tsconfig 配置 | ||
|
||
Vue 组件的元信息提取主要使用 TypeScript 的 TypeChecker, 所以配置`tsconfig.json`时请务必将`strictNullChecks`设为`false` | ||
|
||
```json | ||
{ | ||
"compilerOptions": { | ||
"strictNullChecks": false | ||
} | ||
} | ||
``` | ||
|
||
如果项目中一定要使用`strictNullChecks`,你也可以为 Vue 解析专门配置一个`tsconfig.vue.json`文件 | ||
|
||
```ts | ||
// .dumirc.ts | ||
import * as path from 'path'; | ||
export default { | ||
plugins: ['@dumijs/preset-vue'], | ||
vue: { | ||
tsconfigPath: path.resolve(__dirname, './tsconfig.vue.json'), | ||
}, | ||
}; | ||
``` | ||
|
||
## JSDoc 编写 | ||
|
||
:::warning | ||
推荐在 props 中定义组件的事件,这样可以获得完整的 JSDoc 支持 | ||
::: | ||
|
||
插件主要支持以下 JSDoc 标签: | ||
|
||
### @description | ||
|
||
属性描述,可以在`props`, `slots`, `methods`中使用,例如: | ||
|
||
```ts | ||
export default defineComponent({ | ||
props: { | ||
/** | ||
* @description 标题 | ||
*/ | ||
title: { | ||
type: String, | ||
default: '', | ||
}, | ||
}, | ||
}); | ||
``` | ||
|
||
### @default | ||
|
||
当 prop 的`default`选项为函数时,`default`值不会被解析,这时可以使用`@default`来声明它 | ||
|
||
```ts | ||
defineComponent({ | ||
props: { | ||
/** | ||
* @default {} | ||
*/ | ||
foo: { | ||
default() { | ||
return {}; | ||
}, | ||
}, | ||
}, | ||
}); | ||
``` | ||
|
||
### @exposed/@expose | ||
|
||
:::warning | ||
组件实例的方法或是属性的暴露,必须使用@exposed/@expose 标识,单文件组件也不例外 | ||
::: | ||
|
||
```ts | ||
defineExpose({ | ||
/** | ||
* @exposed | ||
*/ | ||
focus() {}, | ||
}); | ||
``` | ||
|
||
JSX/TSX 的组件方法暴露比较麻烦,需要用户另外声明 | ||
|
||
```ts | ||
export default Button as typeof Button & { | ||
new (): { | ||
/** | ||
* The signature of the expose api should be obtained from here | ||
* @exposed | ||
*/ | ||
focus: () => void; | ||
}; | ||
}; | ||
``` | ||
|
||
### @ignore | ||
|
||
被`@ignore`标记的属性就会被忽略,不会被解析 | ||
|
||
## Markdown 编写 | ||
|
||
在 Markdown 文件编写时 | ||
|
||
```md | ||
<API id="Button"></API> | ||
``` | ||
|
||
只显示 Vue 组件的`props`部分,完整的显示应该这样编写: | ||
|
||
```md | ||
## Button API | ||
|
||
### Props | ||
|
||
<API id="Button" type="props"></API> | ||
|
||
### Slots | ||
|
||
<API id="Button" type="slots"></API> | ||
|
||
### Events | ||
|
||
<API id="Button" type="events"></API> | ||
|
||
### Methods | ||
|
||
<API id="Button" type="methods"></API> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
--- | ||
title: 安装插件 | ||
group: | ||
title: 使用vue | ||
order: 1 | ||
order: 1 | ||
--- | ||
|
||
# 安装 Vue 支持插件 | ||
|
||
dumi 中对 Vue 的支持主要通过`@dumijs/preset-vue`插件集实现, 目前只支持 Vue3 | ||
|
||
## 安装 | ||
|
||
```bash | ||
pnpm i vue | ||
pnpm i -D @dumijs/preset-vue | ||
``` | ||
|
||
> [!NOTE] | ||
> 如果您的 Vue 版本低于 3.3.6,请安装`@vue/compiler-sfc` | ||
## 配置 | ||
|
||
```ts | ||
// .dumirc.ts | ||
export default { | ||
presets: ['@dumijs/preset-vue'], | ||
}; | ||
``` | ||
|
||
## 插件选项 | ||
|
||
### checkerOptions | ||
|
||
Vue 组件元数据解析选项 | ||
|
||
例如,以下配置可以使得名称为`InternalType`的类型跳过检查 | ||
|
||
```ts | ||
// .dumirc.ts | ||
export default { | ||
presets: ['@dumijs/preset-vue'], | ||
vue: { | ||
checkerOptions: { | ||
schema: { ignore: ['InternalType'] }, | ||
}, | ||
}, | ||
}; | ||
``` | ||
|
||
默认情况下,从`node_modules`中引入所有类型不会被解析,这样可以有效避免元信息冗余,你也可以通过配置`exclude`来定制化类型引入 | ||
|
||
```ts | ||
// .dumirc.ts | ||
export default { | ||
presets: ['@dumijs/preset-vue'], | ||
vue: { | ||
checkerOptions: { | ||
schema: { exclude: [/node_modules/, /mylib/] }, | ||
}, | ||
}, | ||
}; | ||
``` | ||
|
||
### tsconfigPath | ||
|
||
TypeChecker 使用的 tsconfig,默认值为 `<project-root>/tsconfig.json` | ||
|
||
### compiler | ||
|
||
Live demo 需要浏览器端的编译器,因此需要加载@babel/standalone。我们提供 `babelStandaloneCDN` 选项来更改其加载地址。默认 CDN 是 | ||
`https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.22.17/babel.min.js` | ||
|
||
```js | ||
vue: { | ||
compiler: { | ||
babelStandaloneCDN: 'https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.22.17/babel.min.js' | ||
}, | ||
}, | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.