element-plus在vue3.0中按需自动导入

最新推荐文章于 2025-08-18 21:05:54 发布

原创最新推荐文章于 2025-08-18 21:05:54 发布 · 2.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #javascript

vue 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过NPM、Yarn或pnpm安装Element Plus，并且详细讲解了如何配置unplugin-vue-components和unplugin-auto-import插件，实现自动导入Element Plus组件，简化Webpack配置。通过创建vue.config.js文件并引入相关插件，使得Element Plus组件的使用更加便捷。

一、引入element-plus

//三种引入方式
# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

二、安装`unplugin-vue-components` 和 `unplugin-auto-import`这两款插件

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

三、`Webpack`配置

手动创建vue.config.js文件

//vue.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 = {
    publicPath:'./',
    configureWebpack: {
        // ...
        plugins: [
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ],
    }
}