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官网
相关文章:
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/dis…...
高质量实时渲染笔记
文章目录 Real-time shadows1 自遮挡问题2 解决阴影detach问题?3 Aliasing4 近似积分5 percentage closer soft shadows(PCSS)percenta closer filtering(PCF)PCSS的思想 6 Variance Soft Shadow Mapping (VSSM)步骤Moment Shadow Mapping 7 Distance field shadow …...
云原生下GIS服务规划与设计
作者:lisong 目录 背景云原生环境下GIS服务的相关概念GIS服务在云原生环境下的规划调度策略GIS服务在云原生环境下的调度手段GIS服务在云原生环境下的服务规划调度实践 背景 作为云原生GIS系统管理人员,在面对新建的云GIS系统时,通常需要应对…...
VBA 宏For WPS(完整版)-供大家学习研究参考
VBE7.1安装方法: 适用于安装 WPS 2019 版本的 缺少 VBA 模块的 亲测可用,内含 VBA 7.1 安装顺序1、2、3、4按照顺序安装; 1.安装MSVCRTRedist\Release目录下32位的安装包,此安装包为运行时库 3.安装VBARedist\Release目录下32位的…...
【Linux】八、进程通信
进程通信的介绍 目的 数据传输:一个进程将它的数据发送给另一个进程; 资源共享:多个进程间共享资源; 通知事件:一个进程向另一个或一组进程发送消息,同时事件如,进程终止时要通知父进程…...
不同类型的软件企业该如何有效的管理好你的软件测试团队?
最近在网上发现一篇记录了2012年《[视频]作为测试经理如何有效管理好你的软件测试团队》的文字内容,感谢记录的人,我也保存一下。顺便将演讲中的PPT重点截图也放上来,一并保存了!。由于是现场速记,过度的口语化&#x…...
vue echart 立体柱状图 带阴影
根据一个博主代码改编而来 <template><div class"indexBox"><div id"chart"></div></div> </template><script setup> import * as echarts from "echarts"; import { onMounted } from "vue&…...
vscode远程linux安装codelldb
在windows上使用vscode通过ssh远程连接linux进行c调试时,在线安装codelldb-x86_64-linux.vsix扩展插件失败,原因是linux服务器上的网络问题,所以需要进行手动安装。 首先在windows上下载: codelldb-x86_64-linux.vsix;…...
【中间件篇-Redis缓存数据库08】Redis设计、实现、redisobject对象设计、多线程、缓存淘汰算法
Redis的设计、实现 数据结构和内部编码 type命令实际返回的就是当前键的数据结构类型,它们分别是:string(字符串)hash(哈希)、list(列表)、set(集合)、zset (有序集合),但这些只是Redis对外的数据结构。 实际上每种数据结构都有自己底层的…...
华为云优惠券介绍、领取入口及使用教程
华为云是华为的云服务品牌,致力于为用户提供一站式云计算基础设施服务。为了吸引用户,华为云经常推出各种优惠活动,其中就包括优惠券的发放,下面将为大家详细介绍华为云优惠券的作用、领取入口以及使用教程。 一、华为云优惠券介绍…...
OPTEE安全通告之CVE-2023-41325(Double free in shdr_verify_signature)
安全之安全(security)博客目录导读 目录 一、受影响版本 二、漏洞描述 三、问题触发 四、官方Patch修复...
第12章 关于 Micro SaaS 的结论
从时间和地点的自由到一种新鲜的独立感,开发 Micro SaaS 应用程序有很多好处。 获得 6 位数的订阅收入。辞掉我朝九晚五的令人丧命的工作。消除毫无意义的会议、办公室政治、混乱和救火。想工作就工作。随时随地使用我想要的任何技术工作。花更多时间陪伴家人。与我开发的应用…...
postman调用接口报{“detail“:“Method \“DELETE\“ not allowed.“}错误, 解决记录
项目是python代码开发, urls.py 路由中访问路径代码如下: urlpatterns [path(reportmanagement/<int:pk>/, views.ReportManagementDetail.as_view(), namereport-management-detail),] 对应view视图中代码如下: class ReportManagementDetail(GenericAPIView):"…...
基于单片机的线路差动保护系统设计
摘 要 随着我国微型电子技术和嵌入式系统的发展,目前行业内相对比较传统的线路差动保护系统无法满足客户的需求。为了改进传统线路差动保护系统在控制上得短板问题,在本次毕业设计中,将使用相对先进、快捷、智能的控制机制。该系统的控制大脑…...
vscode 快速打印console.log
第一步 输入这些 {// Print Selected Variabl 为自定义快捷键中需要使用的name,可以自行修改"Print Selected Variable": {"body": ["\nconsole.log("," %c $CLIPBOARD: ,"," background-color: #3756d4; padding:…...
drawio连接线的样式设置
drawio是一款强大的图表绘制软件,支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用,则直接输入网址draw.io或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能,并实现了云端存储,以及在线共…...
【力扣题:循环队列】
文章目录 一.题目描述二. 思路解析三. 代码实现 一.题目描述 设计你的循环队列实现。 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。 循环队列的一个好…...
配置开启Docker2375远程连接与解决Docker未授权访问漏洞
一、配置开启Docker远程连接 首先需要安装docker,参考我这篇文章:基于CentOS7安装配置docker与docker-compose 配置开启Docker远程连接的步骤: //1-编辑/usr/lib/systemd/system/docker.service 文件 vim /usr/lib/systemd/system/docker.service //2…...
土木非科班转码测开,斩获10家大厂offer
大家好,我是洋子 24届秋招基本已经落下了帷幕,各大互联网大厂基本也开奖完毕,还没有拿到满意offer的同学也不要灰心,积极备战明年的春招。另外,25届想要找暑期实习的同学也可以开始准备起来了,基本大厂在春…...
HarmonyOS 高级特性
引言 本章将探讨 HarmonyOS 的高级特性,包括分布式能力、安全机制和性能优化。这些特性可以帮助你构建更强大、更安全、更高效的应用。 目录 HarmonyOS 的分布式能力HarmonyOS 的安全机制HarmonyOS 的性能优化总结 1. HarmonyOS 的分布式能力 HarmonyOS 的分布…...
LangChain + AgentRun 浏览器沙箱极简集成指南
AgentRun Browser Sandbox 介绍 什么是 Browser Sandbox? Browser Sandbox 是 AgentRun 平台提供的云原生无头浏览器沙箱服务,基于阿里云函数计算(FC)构建。它为智能体提供了一个安全隔离的浏览器执行环境,支持通过标准的 Chrome DevTools Protocol (…...
对于对话中的用户流失预测,OpenClaw 的预测模型特征有哪些?
在讨论对话场景中的用户流失预测时,OpenClaw 的预测模型特征设计其实体现了一种很务实的思路。它没有追求那种听起来特别炫酷、参数庞大的复杂架构,而是把重点放在了如何从实际的对话数据中提取出真正能反映用户去留意图的信号。 这些特征大致可以归为几…...
手把手搭建基于Kintex UltraScale+的Cameralink图像处理系统:从LVDS解码到GTY输出HDMI的完整Vivado工程解析
手把手搭建基于Kintex UltraScale的Cameralink图像处理系统:从LVDS解码到GTY输出HDMI的完整Vivado工程解析 在工业视觉和医疗影像领域,Cameralink接口凭借其高带宽和低延迟特性,依然是许多高端相机的首选接口方案。而Xilinx的Kintex UltraSca…...
厂房钢结构工程:从设计、制造到安装验收的关键要点全解析
一、什么是厂房钢结构工程,为什么越来越常见?厂房钢结构工程,简单说,就是以钢柱、钢梁、檩条、支撑体系、屋面系统和围护系统为主体,完成工业厂房、仓储车间、物流中心、生产车间及配套功能区建设的一类工程。相比传统…...
2026年正点原子开发板移植方案——从0开始的Rootfs之路(5)WSL + NFS 网络启动踩坑记:从挂载失败到成功启动的完整历程
2026年正点原子开发板移植方案——从0开始的Rootfs之路(5)WSL NFS 网络启动踩坑记:从挂载失败到成功启动的完整历程项目已经开源!尝试使用IMX-Forge给你的开发板跑新的Linux 7.0内核:https://github.com/Awesome-Embe…...
Java 零基础全套视频教程,String StringBuffer StringBuilder 类,笔记142-146
Java 零基础全套视频教程,String StringBuffer StringBuilder 类,笔记142-146 一、参考资料 【尚硅谷Java零基础全套视频教程(宋红康主讲,java入门自学必备)】 https://www.bilibili.com/video/BV1PY411e7J6/?p142&share_sourcecopy_web…...
Anaconda环境下Spyder升级保姆级教程(附常见问题解决方案)
Anaconda环境下Spyder升级全攻略与疑难排解手册 在Python数据科学领域,Spyder作为专为科学计算设计的集成开发环境(IDE),凭借其变量查看器、交互式控制台和强大的调试功能,已成为众多研究人员的首选工具。而Anaconda作为Python科学计算的瑞士…...
3大核心策略:构建高效抖音内容采集系统的技术实践
3大核心策略:构建高效抖音内容采集系统的技术实践 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. …...
基于Pixel Epic · Wisdom Terminal的MySQL智能运维:安装配置与性能调优
基于Pixel Epic Wisdom Terminal的MySQL智能运维:安装配置与性能调优 1. 引言 MySQL作为最流行的开源关系型数据库,在各类业务系统中扮演着核心角色。但传统的数据库运维往往面临几个痛点:配置参数复杂难懂、SQL优化依赖经验、性能问题排查…...
终极指南:如何用智能工具轻松突破内容访问限制
终极指南:如何用智能工具轻松突破内容访问限制 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 内容访问突破工具是现代数字工作者的必备利器,它能帮助研究人员…...
