Element-plus自动导入

椰汁菠萝2024-12-28 9:11

安装

sh 复制代码

npm i element-plus

自动引入

1. 安装两个插件

sh 复制代码

npm install -D unplugin-vue-components unplugin-auto-import

2. 配置插件

vue3项目修改vite.config.js，把两个插件添加入即可，注意:不是覆盖原有配置

Vite

js 复制代码

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

其他webpack项目修改webpack.config.js

webpack

js 复制代码

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

自此，项目中的插件都可以直接使用，无需再导入，运行或打包时，会自动导入。

问题

当我们在js中使用组件时，不导入会报错，导入后不走自动导入，样式加载就会出问题，最典型的就是ElMessage组件

解决方案：

在.eslintrc.cjs中加入全局变量名