# vue3-global-components-typescript-demo **Repository Path**: onemonth/vue3-global-components-typescript-demo ## Basic Information - **Project Name**: vue3-global-components-typescript-demo - **Description**: vue3创建自定义全局(业务)组件的时候通过volar支持ts类型 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2021-12-30 - **Last Updated**: 2021-12-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 前言 在写vue3 + ts的时候,webstorm识别不了自定义的全局组件,所以改用vscode + volar来支持,在写的过程中,需要写成volar支持的格式方能显示组件的类型,在写的过程中参考了element-plus / antd的写法 ## 怎么看 1. 我把组件写在了 `src/components` 下,其中目录结构受到 `element-plus`启发 - 在`src/components/button/index.ts`中,需要使用具名导出,其他的组件也是一样的方式导出 ```typescript import KaijiaButton from './src/button.vue' export { KaijiaButton } ``` 2. 然后在根目录的`types`下新建`*.d.ts`来声明你写的全局组件 [怎么声明的请点击跳转到types/global.d.ts](./types/global.d.ts) 3. 基本上就是这样了,另外再写的过程中,volar加载的很慢,可能类型要过一会才会出现,这个比较难受 4. 如果不是全局组件,则不必这么麻烦,直接`import`组件就有类型声明了