vue3中按需引入element-plus后使用 ElMessage等工具方法在eslint中报错解决

千万不要学前端呀

1343人浏览 · 2026-01-17 17:56:04

千万不要学前端呀 · 2026-01-17 17:56:04 发布

Vue3中按需使用Elementui 动态组件在Eslint及TS的报错提示问题

❗阅读前声明：作者由于使用了ts及eslint及husky钩子，致使项目中提示报错（虽然是自动引入了，但是会显示红色波浪线），以及提交git时被eslint校验拦截。
请注意您的版本及问题是否与作者一致，避免浪费时间阅读该文章，如能解决您的问题，非常荣幸！

📑总结：在AutoImport中并入自定义信息，'element-plus': ['ElMessage', 'ElMessageBox', 'ElNotification', 'ElLoading']

版本声明⤵️

  "dependencies": {
    "vue": "^3.5.24", // 核心框架
    "element-plus": "^2.13.1" // ui组件
  },
  "devDependencies": {
    "unplugin-auto-import": "^21.0.0", // 自动导入指令
    "unplugin-vue-components": "^31.0.0", // 自动导入组件
    "eslint": "^9.39.2", // 如果你未使用eslint就不会报错提示，也就不会被husky拦截
    "vite": "^7.2.4" // 构建框架
    ... // 其余无关的插件和版本就不再做展示
  }

elementui的使用

ele是经典的组件库了，此处不再做过多赘述，且当您根据ele文档中按需引入时，大概率会遇到和作者一样的问题（报错拦截或样式丢失！）

报错拦截

事故说明：当我们安装了unplugin-auto-import、unplugin-vue-components后，可以指定直接使用组件和方法而无需手动导入。

但问题就出在，当我们使用ele的全局工具方法时，如：ElMessage、ElMessageBox、…，我们的规范化工具提示报错了！

可以看到，咱们的eslint报错了，找了一圈发现，auto-import¹这个插件生成的声明文件中（auto-imports.d.ts），根本就没有指定ElMessage的声明，.eslintrc-auto-import.json²也一样。

翻看auto-import¹文档可知，其提供了自定义的可预先声明需要自动导入的第三方包，然后我们手动指定，ele中全局方法的声明。
```
plugins: [
  vue(),
  AutoImport({
    imports: [
      'vue',
      'vue-router',
      'pinia',
      {
        // ！核心在此处，对于第三方的方法需要声明则在此处并入
        'element-plus': ['ElMessage', 'ElMessageBox', 'ElNotification', 'ElLoading']
      }
    ],
    resolvers: [ElementPlusResolver()],
    eslintrc: {
      enabled: true, // 指定eslint生成声明文件
      filepath: './src/types/.eslintrc-auto-import.json' // 指定要生成的位置
    },
    dts: './src/types/auto-imports.d.ts' // 指定要生成的位置
  }),
  Components({
    resolvers: [ElementPlusResolver()],
    dts: './src/types/components.d.ts' // 指定要生成的位置
  })
]
```
然后再重新运行下启动指令：pnpm run dev

由于我指定了声明文件生成地址，所以文件会生成在我的src/types下

可以看到声明文件正常声明了我们要使用的工具类型，至此，我们的报错已经完全消除，也不会被husky给拦截了。
样式丢失

虽然自动引入了，但是样式却丢失了，通过ele文档发现，按需引入时，手动引入的组件需要手动引入样式，此处直接参考文档即可，安装好这个插件并引入即可。
在这里插入图片描述
这里补充下，ElementPlus 指定要传入一个参数，这里没有需要指定的配置项，直接传入空对象即可：ElementPlus({})