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

halo14162024-03-07 19:36

该项目是基于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

javascript 复制代码

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    // ... other
    AutoImport({
      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)，不知道为啥！

有知道的大佬说一声呢，感谢！！(^▽^)

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