编程 Element Plus 接入 Vue 3：全量引入、按需自动导入、手动引入怎么配，以及 pnpm 下 dayjs 的坑

2026-10-11 00:04:51

Element Plus 接入 Vue 3：全量引入、按需自动导入、手动引入怎么配，以及 pnpm 下 dayjs 的坑

文档版本：2.14.6。Quick Start：element-plus.org/en-US/guide/quickstart.html。项目地址：官网、GitHub。

全量引入 Full Import

不关心包体积时，全量引入配置最少。

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')

Volar 支持

如果使用 volar，需要在 tsconfig.json 的 compilerOptions.types 中加入 "element-plus/global"。

tsconfig.json：

{
"compilerOptions": {
"types": ["element-plus/global"]
}
}

按需引入 On-demand Import

按需引入需要额外插件。

自动导入 Auto import（推荐）

先安装 unplugin-vue-components 和 unplugin-auto-import：

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

然后在 Vite 或 Webpack 配置里加入对应插件。

vite.config.ts：

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.config.js：

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
plugins: [
AutoImport({ resolvers: [ElementPlusResolver()] }),
Components({ resolvers: [ElementPlusResolver()] }),
],
}

其他打包器（Rollup、Vue CLI）参考 unplugin-vue-components 与 unplugin-auto-import 文档。

Nuxt

Nuxt 下只需安装 @element-plus/nuxt，然后在 nuxt.config.ts 里配置：

export default defineNuxtConfig({
modules: ['@element-plus/nuxt'],
})

pnpm 注意：dayjs 不是 ESM

Element Plus 内部使用的 dayjs 包不是 JavaScript modules（ESM）。为确保启动前能转换为 ESM，需要配置 pnpm hoist 依赖。

pnpm 10.5.x 及更早：在项目根 .npmrc 加：

shamefully-hoist=true
node-linker=hoisted

pnpm 10.6.x 及更新：在 pnpm-workspace.yaml 加：

shamefullyHoist: true
nodeLinker: hoisted

或者在项目里显式安装 dayjs：

pnpm add dayjs

手动引入 Manually import

Element Plus 基于 ES Module 提供开箱 Tree Shaking，但需要安装 unplugin-element-plus 处理样式导入。

App.vue：


I am ElButton

import { ElButton } from 'element-plus'

vite.config.ts：

import ElementPlus from 'unplugin-element-plus/vite'

export default {
plugins: [ElementPlus()],
}

Starter Template

官方提供：

Vite Template
Nuxt Template
Laravel Template

全局配置 Global Configuration

全量引入：

app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入时使用 el-config-provider：

const zIndex = 3000
const size = 'small'

站点与后续文档

官网：element-plus.org
仓库：github.com/element-plus/element-plus
中国镜像 China Mirror
Element UI for Vue 2
Changelog

文档还有 i18n、Migration from ElementUI、Theming、Dark Mode、Custom Namespace(2.2.0)、Custom Defaults(2.13.3)、SSR、Built-in Transitions 等章节。

复制全文生成海报 ElementPlus Vue 按需引入前端工程