该项目是基于vite创建的 vue3 + ts + vue-router + pinia项目;

启动项目：

npm install
npm run dev

启动后遇到了以下问题：

问题1：

Component name "Person" should always be multi-word. eslint(vue/multi-word-component-names)
解释：组件名“Person”应该总是由多个单词组成（组件名 name: ‘Person’）

解决方法：
.eslintrc.cjs 中添加以下配置

rules: {'vue/multi-word-component-names': 'off'
}

问题2：

项目中会频繁引入使用 vue、vue-router、pinia 内的API， 如ref、reactive 等
使用自动引入插件进行全局引入即可

使用步骤：

• 安装：npm i -D unplugin-auto-import
• 修改 vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [// ... otherAutoImport({imports: ['vue','vue-router', 'pinia'], // 自动引入的三方库// dts: 'src/auto-import.d.ts', // 全局自动引入文件存放路径；不配置保存在根目录下；配置为false时将不会生成 auto-imports.d.ts 文件（不影响效果）eslintrc: {// 项目中使用了 eslint，那么虽然可以正常使用 API 了，但是 eslint 还是会报没有引入的报错。下面的配置可以处理这种情况enabled: true, // 会在根目录下自动生成 .eslintrc-auto-import.json 文件}})]
})

• .eslintrc.cjs 中使用自动生成的 .eslintrc-auto-import.json 文件

module.exports = {root: true,extends: [// ... other 配置'./.eslintrc-auto-import.json'],
}

ps: 我配置了后并没有效果，还是会报错如找不到名称“ref”。ts-plugin(2304)，不知道为啥！
有知道的大佬说一声呢，感谢！！(^▽)

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！