解决vue-cli创建vue3工程时,在配置ts过程中出现的问题

问题总结和解决方案
TypeScript 配置问题:

问题: tsconfig.json 文件未正确配置以处理 Vue 文件。
解决方案: 更新 tsconfig.json 以包含 .vue 文件,并移除引用 vite/client 的 types 字段。
ESLint 配置问题:

问题: ESLint 无法加载 @vue/eslint-config-typescript/recommended 配置。
解决方案: 确保 @vue/eslint-config-typescript 包已正确安装并在 .eslintrc.json 中引用。
TypeScript 版本兼容性:

问题: 使用的 TypeScript 版本不受 @typescript-eslint/typescript-estree 官方支持。
解决方案: 在 package.json 中更新 TypeScript 版本为受支持的版本(^4.4.4)。
Vue Loader 问题:

问题: 由于缺少或配置错误的加载器,解析 .vue 文件时出现错误。
解决方案: 创建并优化 vue.config.js 以确保正确处理 TypeScript 和 Vue 文件,并添加必要的加载器。
Vue 文件的模块声明:

问题: TypeScript 找不到 .vue 模块的声明文件。
解决方案: 创建 shims-vue.d.ts 以声明 .vue 文件的模块类型。
一般配置和依赖:

问题: 各种配置文件和依赖未正确设置以支持 Vue 3 和 TypeScript 项目。
解决方案: 更新 package.json、.eslintrc.json 和其他配置文件,以确保所有必要的依赖和设置已正确应用。
详细更改
tsconfig.json:

包含 .vue 文件。
移除引用 vite/client 的 types 字段。
.eslintrc.json:

确保正确扩展自 @vue/eslint-config-typescript/recommended。
package.json:

更新 TypeScript 版本为 ^4.4.4。
确保包含所有必要的 Vue 3、TypeScript 和 ESLint 依赖。
vue.config.js:

配置以正确处理 TypeScript 和 Vue 文件。
添加必要的加载器并解析扩展名。
shims-vue.d.ts:

声明 .vue 文件的模块类型。
通过解决这些问题,项目现在应该能够成功编译且没有错误。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容