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
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),不知道为啥!

有知道的大佬说一声呢,感谢!!()

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

相关推荐
duansamve6 小时前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
WujieLi9 小时前
初识 Vite+:一文了解 Rust 驱动的新一代前端工具链
javascript·rust·vite
JNU freshman13 小时前
Element Plus组件
前端·vue.js·vue3
liangshanbo121515 小时前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript
却尘16 小时前
Vite 炸裂快,Webpack 稳如山,Turbopack 想两头要:谁才是下一个王?
前端·面试·vite
duandashuaige1 天前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
萌萌哒草头将军2 天前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
Damon小智2 天前
仓颉 Markdown 解析库在 HarmonyOS 应用中的实践
华为·typescript·harmonyos·markdown·三方库
晓得迷路了2 天前
栗子前端技术周刊第 102 期 - Vite+ 正式发布、React Native 0.82、Nitro v3 alpha 版...
前端·javascript·vite
熊猫钓鱼>_>2 天前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript