vue3+ts+vite项目使用 unplugin-auto-import (自动导入)

该项目是基于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: [
    // ... other
    AutoImport({
      imports: ['vue','vue-router', 'pinia'], // 自动引入的三方库
      dts: 'src/types/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: 我配置了后并没有效果，还是会报错如找不到名称“computed”。ts-plugin(2304)，如下：
  
  解决方法：tsconfig.json 里面配置如下：

"include": [
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.jsx",
    "src/**/*.vue",
    "./types/auto-imports.d.ts" // 和 AutoImport dts保持一致 引入即可
  ],

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