uni-app vue-cli 创建的 vite + ts 项目中使用默认 button 组件报 ts 类型错误

在 uni-app 项目中，使用 vue-cli 创建的 Vite + TypeScript 项目时，如果使用默认的 button 组件时遇到 TypeScript 类型错误，可能是由于 TypeScript 无法正确识别 uni-app 提供的组件类型。

解决方法

1. 安装 [@dcloudio](/user/dcloudio)/types 类型定义包

   uni-app 提供了官方的 TypeScript 类型定义包 [@dcloudio](/user/dcloudio)/types，你可以通过安装这个包来解决类型问题。

   npm install [@dcloudio](/user/dcloudio)/types --save-dev
   

2. 在 tsconfig.json 中配置类型

   确保 tsconfig.json 中的 types 字段包含了 [@dcloudio](/user/dcloudio)/types。

   {
     "compilerOptions": {
       "types": ["[@dcloudio](/user/dcloudio)/types"]
     }
   }
   

3. 使用 uni-app 的 button 组件

   在你的 Vue 组件中使用 button 组件时，TypeScript 应该能够正确识别它的类型。

   <template>
     <button @click="handleClick">Click me</button>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   
   export default defineComponent({
     methods: {
       handleClick() {
         console.log('Button clicked');
       }
     }
   });
   </script>
   

4. 检查 vite.config.ts 配置

   确保 vite.config.ts 中正确配置了 uni-app 的插件。

   import { defineConfig } from 'vite';
   import uni from '[@dcloudio](/user/dcloudio)/vite-plugin-uni';
   
   export default defineConfig({
     plugins: [uni()]
   });
   

其他注意事项

• 确保 uni-app 版本兼容性：确保你使用的 uni-app 版本与 [@dcloudio](/user/dcloudio)/types 版本兼容。
• 检查 vue 和 vite 版本：确保 vue 和 vite 的版本与 uni-app 的版本兼容。

示例项目结构

my-uni-app/
├── src/
│   ├── components/
│   ├── pages/
│   ├── App.vue
│   └── main.ts
├── tsconfig.json
├── vite.config.ts
└── package.json