docs: add guides for typescript (#20)

Co-authored-by: GU Yiling <justice360@gmail.com>
This commit is contained in:
xdm 2022-01-24 19:02:21 +08:00 committed by GitHub
parent 6ccf9fd9c4
commit 17a9801fc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 72 additions and 0 deletions

View File

@ -9,6 +9,10 @@
"title": "升级日志",
"slug": "changelog"
},
{
"title": "TypeScript 支持",
"slug": "typescript"
},
{
"title": "起步",
"slug": "getting-started",

68
one/docs/typescript.md Normal file
View File

@ -0,0 +1,68 @@
# TypeScript 支持
VEUI 提供了组件 API 的 TS 声明,需要配合 `Volar` 获得最佳的开发体验。
:::tip
VEUI 从 2.5.2 版本开始提供组件的 TS 声明。
:::
如果您使用 npm < 7 或其他不会自动安装 peerDependencies 的包管理器需要手动安装
```sh
npm i -D @vue/runtime-dom
```
### 配置 Volar 扩展
请参考 `Volar` 文档中的 [`Setup for Vue2`](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar#:~:text=Usage-,Setup%20for%20Vue%202,-Define%20Global%20Components)。
### 本地配置
`tsconfig.json` 中添加如下配置来支持 `Vue 2` 的模板语法。
```json
{
"vueCompilerOptions": {
"experimentalCompatMode": 2,
"experimentalTemplateCompilerOptions": {
"compatConfig": { "MODE": 2 }
}
}
}
```
:::tip
如果无法查看类型声明,可以尝试重启 `Volar` 按下 <kbd></kbd> + <kbd></kbd> + <kbd>P</kbd> 后选择 `Volar: Restart Vue server`
:::
### 使用示例
```vue
<template>
<veui-button>OK</veui-button>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import { Button } from 'veui'
export default defineComponent({
components: {
'veui-button': Button
}
})
</script>
```
:::tip
如果您没有手动引入并注册组件,而是使用了类似 `unplugin-vue-components` 的自动注册方案,那么请引入文件 `veui/types/global.d.ts` 或者在 `tsconfig.json` 中引入该文件:
```json
{
"include": [
"src/**/*",
"node_modules/veui/types/global.d.ts"
]
}
```
:::