vue项目中引入element-plus

本文介绍了在项目中安装和使用Element-Plus的两种方法:一是完整引入,虽然使用方便但可能增加打包文件的大小;二是通过unplugin-vue-components和unplugin-auto-import实现按需引入,以优化项目资源。在Vite或Webpack配置文件中设置相关插件可以实现组件的自动导入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

element-plus官网

在项目中安装element-plus:yarn add element-plus -S

1,完整引入

优点:使用方便     缺点:打包文件较大

在src/main.js中引入,在项目中直接使用

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)

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

2.按需引入

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

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

在打包工具配置文件vite.config.js或webpack.config.js中引入

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

加入plugins中

AutoImport({

      resolvers: [ElementPlusResolver()],

    }),

    Components({

      resolvers: [ElementPlusResolver()],

    }),

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值