vue3使用element-plus

安装

# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus

全局引入

main.js

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'//引入ElementPlus所有组件
import 'element-plus/dist/index.css'//引入ElementPlus样式
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)//注册使用
app.mount('#app')

按需引入(推荐) 

按需引入(因为vue3按需引入不需要一个个手动引入了,只要页面使用到的组件会自动帮你引入,何乐而不为呢)

安装插件:

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

在vite.config.js中使用插件

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],//插件一}),Components({resolvers: [ElementPlusResolver()],,//插件二}),],
})

用webpack打包的项目中在vue.config.js或者webpack.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 = {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}

到这里就可以正常使用了,详细安装使用参考官网非常详细element-plus官网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/144664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FBI:皇家勒索软件要求350名受害者支付2.75亿美元

导语 最近,FBI和CISA联合发布的一份通告中透露,自2022年9月以来,皇家勒索软件(Royal ransomware)已经入侵了全球至少350家组织的网络。这次更新的通告还指出,这个勒索软件团伙的赎金要求已经超过了2.75亿美…

GDPU 商务英语 [初入职场](持续更新……)

👨‍🏫 商务英语(初入职场电子书PDF)提取码:t9ri Unit 1 Job-seeking ✨ 单词 recruitment n. 招聘physical adj. 有形的;物质的profitability n. 盈利launch vt. 将(新产品等)投放市场budget n. 预算account for 占…

【入门篇】1.3 redis客户端之 jedis 高级使用示例

文章目录 0.前言1. 发布和订阅消息2. 事务操作3. 管道操作4. jedis 支持哨兵模式5. jedis 支持集群模式5. 参考链接 0.前言 Jedis是Redis的Java客户端,它支持所有的Redis原生命令,使用方便,且可以与Java项目无缝集成。 该库的最新版本支持Re…

八叉树(Octree)和KD树区别?2d tree与3d tree区别?

一、八叉树(Octree)和KD树 八叉树(Octree) 结构:八叉树是一种用于三维空间数据的树状结构,每个分支节点恰好有八个子节点。每个节点代表空间中的一个立方体区域,这个立方体区域被均匀地分割成…

场景图形管理-多视图与相机(3)

在OSG中多视图的管理是通过osgViewer::CompositeViewer类来实现的。该类负责多个视图的管理及同步工作,继承自osgViewer;:ViewerBase类,继承关系图如图8-13所示 图8-13 osgViewer::CompositeViewer 的继承关系图 在前面已经讲到,osgViewer:Vi…

Win通过WSL配置安装Redis

一共分为如下几步: 安装WSL发行版,如Ubuntu安装Redis配置Redis与WSL WSL安装 这里有微软官方的文档:https://learn.microsoft.com/zh-cn/windows/wsl/install 但我不建议零基础的这么做。很容易输完一些命令之后,把环境弄得乱七…

docker安装elasticsearch,elasticsearch-head

安装elasticsearch 1、执行命令:docker pull elasticsearch:8.11.1 2、执行命令:docker run --name elastic -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -d elasticsearch:8.11.1 3、执行命令:docker exec -it …

私域电商:实体商家想通过异业联盟引流,应该怎么做?

​异业联盟引流是一种有效的营销策略,通过与不同行业的企业或品牌合作,共同推广产品或服务,扩大品牌影响力和用户群体。以下是异业联盟引流的一些详细过程: ​选择合作联盟: 首先,需要选择与自己企业或品…

Mybatis-Plus最新教程

目录 原理:MybatisPlus通过扫描实体类,并基于反射获取实体类信息作为数据库信息。 ​编辑1.添加依赖 2.常用注解 3.常见配置: 4.条件构造器 5.QueryWrapper 6.UpdateWrapper 7.LambdaQueryWrapper:避免硬编码 8.自定义SQL 9.Iservic…

【kafka】windows安装启动

1.zookeeper的安装与启动 快速打开window powershell: windowx,选 2.kafka下载 —注意kafka和zookeeper需要版本匹配 安装路径 注意,kafka安装目录不能有空格。文件下载到: D:\Program_Files\kafka_2.12-3.6.0新建logs文件 修改c…

nginx服务器

nginx反向代理 nginx 反向代理的好处: 提高访问速度 因为nginx本身可以进行缓存,如果访问的同一接口,并且做了数据缓存, nginx就直接可把数据返回,不需要真正地访问服务端,从而提高访问速度。 进行负载均衡…

mysql数据库中mysql database 数据被破坏产生的一系列问题

在执行sql脚本时,没有注意到sql脚本文件包含了对mysql 原始数据库的操作,执行了脚本。 脚本执行成功之后,登录或链接数据库查看数据时报错: The user specified as a definer (‘mysql.infoschema’‘localhost’) does not exis…

FISCOBCOS入门(十)Truffle自定义测试helloworld

在windos终端内安装truffle npm install -g truffle truffle --version 出现上图情况也没问题 下面就可以进行我们的操作了 创建一个文件truffle 创建一个空工程 truffle init 在contracts内加入HelloWorld合约 // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; c…

桂院校园导航 | 云上高校导航 云开发项目 二次开发教程 1.3

Gitee代码仓库:桂院校园导航小程序 GitHub代码仓库:GLU-Campus-Guide 演示视频 中国大学生计算机设计大赛-移动应用与开发-云上高校导航 升级日志 1.3 优化了小程序的数据存储方式,对部分页面进行了调整,调整了功能和代码。 引…

深度学习之基于Pytorch和OCR的识别文本检测系统

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介深度学习与OCRPyTorch在OCR中的应用文本检测系统的关键组成部分1. 图像预处理2. 深度学习模型3. 文本检测算法4. 后处理 二、功能三、系统四. 总结 一项目简…

对象存储OSS服务器邀请试用

文章目录 试用产品领取产品试用权限上传文件开启加速传输提交作品小程序提交任务获取奖励 试用产品 先下载要上传的资源 电脑浏览器打开此页面开始试用,页面如下图 未登录的先登录 领取产品试用权限 在该页面中点击立即试用,弹框勾选服务协议并领取试…

C的内联函数(C99)

文章目录 内联函数(C99)参考 内联函数(C99) 通常,函数调用都有一定的开销,因为函数的调用过程包括建立调用、 传递参数、跳转到函数代码并返回。使用宏使代码内联,可以避免这样的开销。 C99还…

MIB 6.1810操作系统实验:准备工作(Tools Used in 6.1810)

6.1810 / Fall 2023 实验环境: Ubuntuxv6实验必要的依赖环境能通过make qemu进入系统 $ sudo apt-get update && sudo apt-get upgrade $ sudo apt-get install git build-essential gdb-multiarch qemu-system-misc gcc-riscv64-linux-gnu binutils-ri…

Netty - 回顾Netty高性能原理和框架架构解析

文章目录 概述JDK 原生 NIO 程序的问题Why Netty使用场景Related ProjectsNetty 高性能设计I/O 模型【阻塞 I/O】:【I/O 复用模型】【基于 Buffer】 线程模型事件驱动模型Reactor 线程模型Netty的线程模型异步处理 Netty框架的架构设计功能特性模块组件Bootstrap、S…

jbase实现通用码表

没有通用码表的体系是不完美的,当年我用C#能实现的通用码表,现在在java一样的实现了,通用码表对提高开发效率和降低开发成本的作用巨大,开发可以专注写业务,而不必被太多的维护界面束缚。进而体现在产品竞争力上面&…