vue3 element-plus按需引用组件

下载element-plus和对应插件

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

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

配置vus.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 = {
  configureWebpack: {
    plugins: [
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
}

}

和官网element-plus提供的webpack代码不同的是,vue3 配置没有plugins这个,必须包含在configureWebpack中才可以。

验证

验证标准,引用配置完成后,在页面使用相关组件,可以整成使用。
在这里插入图片描述

在这里插入图片描述
OK!

可能会出的错误

  1. Error: Cannot find module ‘vue-loader-v16/package.json‘
    解决方法:删除node_model ,并将项目的package.json和package_lock.json 文件,然后在终端执行“npm – install”或“cnpm --install”重新下载项目的相关依赖。
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 Vue3 和 Element Plus 的 Drawer 组件来封装一个抽屉组件。首先要在组件中引入 Drawer 组件,然后在模板中使用 Drawer 组件的属性和事件来实现抽屉的展示和隐藏。 以下是一个简单的抽屉组件的代码示例: ```vue <template> <el-drawer :visible="visible" :title="title" :size="size" :direction="direction" :before-close="beforeClose" @open="handleOpen" @close="handleClose" > <slot></slot> </el-drawer> </template> <script> import { ref } from 'vue'; import { ElDrawer } from 'element-plus'; export default { name: 'MyDrawer', components: { ElDrawer, }, props: { visible: { type: Boolean, default: false, }, title: { type: String, default: '', }, size: { type: String, default: '30%', }, direction: { type: String, default: 'rtl', }, }, setup(props, { emit }) { const beforeClose = (done) => { // 可以在这里添加关闭前的逻辑 done(); }; const handleOpen = () => { emit('update:visible', true); }; const handleClose = () => { emit('update:visible', false); }; return { beforeClose, handleOpen, handleClose, }; }, }; </script> ``` 在父组件中使用该抽屉组件时,可以通过 v-model 来控制抽屉的显示和隐藏: ```vue <template> <div> <el-button @click="visible = true">打开抽屉</el-button> <my-drawer v-model="visible" title="抽屉标题"> 抽屉内容 </my-drawer> </div> </template> <script> import MyDrawer from './MyDrawer.vue'; export default { components: { MyDrawer, }, data() { return { visible: false, }; }, }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值