关于vue—cli创建vue3项目引入element plus 按需引入方式的记录

本文记录了在Vue3项目中使用Vue CLI如何按需引入Element Plus的步骤,包括解决配置问题和避免项目体积过大的方法。通过修改vue.config.js文件进行Webpack配置,实现了在组件中直接使用Element Plus的便捷性。
摘要由CSDN通过智能技术生成

         虽然说工作中一直使用的vue2 但是在空闲之余也学习学习vue3,在断断续续的学习中,打算用element框架,但是在按需引入的时候频频报错,如果不按需引入全局引入的话又导致项目体积过大,后在查阅相关资料之后顺利的解决,再次做以记录。

废话不多说直接记录

1、根据element plus 官网指引下载相关依赖

        

由于我用的是vue cli 不是vite所以我直接用的内部包管理器,不用内部管理器的也可以用npm 等方式引入

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

2、在官网中提供了一种自动按需引入的方式,就不用像VUE2一样解构出来某一个元素,而后用app.use(xxx)的方式进行注入了,而是可以直接在需要用的组件中使用,极为方便

        首先在vue.config.js进行Webpack的配置,(这里也是我卡住报错的原因,之前我一直认为是像vue2一样创建Webpack.config.js进行配置)。代码如下

        

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplu
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值