elementPlus按需导入配置

方也_arkling2026-02-01 12:32

文章摘要：ElementPlus是一个基于Vue3的UI框架，配置方式分为完整引入和按需引入两种。完整引入只需安装element-plus包后全局导入；按需引入需要额外安装unplugin-vue-components和unplugin-auto-import插件，并在vite/webpack配置中添加相应解析器。配置完成后，可直接从文档中复制组件代码使用。

elementPlus网站地址： 一个 Vue 3 UI 框架 | Element Plus

配置elementPlus，去看文档！去看文档！去看文档！文档很详细。

step1:安装elementPlus

复制代码

npm install element-plus --save

step2.完整引入或按需引入

完整引入：

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

javascript 复制代码

//main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

按需引入：

首先安装 unplugin-vue-components 和 unplugin-auto-import这两款插件

bash 复制代码

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

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

javascript 复制代码

//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()],
    }),
  ],
})

这样就配置好elementPlus了，当你需要用组件的时候，在文档里找到想要的组件代码，复制粘贴就好了。