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

关注

原创最新推荐文章于 2026-04-28 00:30:00 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

【组件库】element-plus组件库参考：Vue3 ts环境下的PropType，如下title: "标题一",description: "描述一",},title: "标题二",description: "描述二",},非setup语法糖的环境中使用PropType 定义props数据类型// 1. 在“./prop”这个文件中定义并导出：类型 CompProps// 2. 在子组件中接收props 阅读详情

一、引入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()],
            }),
        ],
    }
}