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": "升级日志",
|
||||
"slug": "changelog"
|
||||
},
|
||||
{
|
||||
"title": "TypeScript 支持",
|
||||
"slug": "typescript"
|
||||
},
|
||||
{
|
||||
"title": "起步",
|
||||
"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