docs: add guides for typescript (#20)
Co-authored-by: GU Yiling <justice360@gmail.com>
This commit is contained in:
parent
6ccf9fd9c4
commit
17a9801fc6
@ -9,6 +9,10 @@
|
|||||||
"title": "升级日志",
|
"title": "升级日志",
|
||||||
"slug": "changelog"
|
"slug": "changelog"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"title": "TypeScript 支持",
|
||||||
|
"slug": "typescript"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"title": "起步",
|
"title": "起步",
|
||||||
"slug": "getting-started",
|
"slug": "getting-started",
|
||||||
|
68
one/docs/typescript.md
Normal file
68
one/docs/typescript.md
Normal 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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
:::
|
Loading…
Reference in New Issue
Block a user