当前位置： 首页 > news >正文

Vue3+Element Plus环境搭建和一键切换明暗主题的配置

news 文章来源：https://blog.csdn.net/bosivip/article/details/130449555 2024/11/18 3:01:20

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。而Element Plus是一款基于Vue3面向设计师和开发者的组件库。

最终效果：

 

环境搭建

已安装 16.0 或更高版本的 Node.js，终端：

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / YesScaffolding project in ./<your-project-name>...
Done.

然后：

> cd <your-project-name>
> npm install
> npm run dev

然后打开提示的演示网址就能看到Vue的预览页面了。

Element Plus

element+的安装：

npm install element-plus --save
npm install @element-plus/icons-vue

上边安装了element和内置的图标库。

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

然后再入口处引入element即可使用element了。

明暗主题的切换

明暗主题的切换非常简单，首先在项目的index.html中添加class="dark"：

<html lang="en" class="dark">

在组件中使用Vueuse的内置函数就可以搞定了。

import { useDark, useToggle } from '@vueuse/core'
const toggleDark = useToggle(isDark)

模板里添加一个开关

<el-switch v-model="isDark" size="large" class="mt-2" style="margin-left: 24px" inline-prompt :active-icon="Moon" :inactive-icon="Sunny" />

这样就可以自由切换应用的明暗主题了,其他具体代码可以查看代码仓库

最后，项目地址：

GitHub - bosichong/elementplus-test-demo

相关文章：

Vue3+Element Plus环境搭建和一键切换明暗主题的配置

Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。而Element Plus是一款基于Vue3面向设计师和开发者的组件库。 最终效果&#xff1a; 环境搭建 已安装 16.0 或更高版本的 Node.js&#xff0c;终端&#xff1a; npm init vuelatest这一…...

编程日记 2023/5/30 7:46:29

Leetcode326. 3 的幂

Every day a leetcode 题目来源&#xff1a;326. 3 的幂 相似题目&#xff1a;342. 4的幂 解法1&#xff1a;递归 代码&#xff1a; /** lc appleetcode.cn id326 langcpp** [326] 3 的幂*/// lc codestart class Solution { public:bool isPowerOfThree(int n){if (n <…...

编程日记 2023/5/30 7:18:41

【运动规划算法项目实战】如何在栅格地图中实现Dijkstra算法

文章目录 简介一、算法介绍1.1 Dijkstra算法流程1.2 Dijkstra算法伪代码二、代码实现2.1 ROS实现2.2 RVIZ演示三、总结简介 Dijkstra算法是一种用于图中单源最短路径的贪心算法。在计算机科学和网络设计中广泛应用。该算法从起点开始，通过优先选择距离起点最近的未标记节点来…...

编程日记 2023/5/30 6:42:18

【算法】一文彻底搞懂ZAB算法

文章目录 什么是ZAB 算法&#xff1f;深入ZAB算法1. 消息广播两阶段提交ZAB消息广播过程 2. 崩溃恢复选举参数选举流程 ZAB算法需要解决的两大问题1. 已经被处理的消息不能丢2. 被丢弃的消息不能再次出现 最近需要设计一个分布式系统&#xff0c;需要一个中间件来存储共享的信息…...

编程日记 2023/5/29 20:49:45

【软考高级】2022年系统分析师综合知识

1.( )是从系统的应用领域而不是从系统用户的特定需要中得出的&#xff0c;它们可以是新的功能性需求&#xff0c;或者是对已有功能性需求的约束&#xff0c;或者是陈述特定的计算必须遵守的要求。 A.功能性需求 B. 用户需求 C.产品需求 D.领域需求 2.对于安全关键系…...

编程日记 2023/5/6 16:13:17

关于AI未来的思考和应用场景

关于AI未来的思考和应用场景 AI&#xff08;人工智能&#xff09;是当今最热门的技术领域之一&#xff0c;它已经在多个领域产生了深远的影响&#xff0c;如医疗、金融、制造业等。未来&#xff0c;AI将继续发展&#xff0c;并在更多领域产生重要的影响。 AI的未来发展方向有…...

编程日记 2023/5/6 16:08:15

智慧城市规划数字化管理：数字孪生技术的创新应用

随着智能城市的不断发展&#xff0c;数字孪生技术也开始在智慧城市的建设中得到了广泛应用。数字孪生作为一种数字化的复制技术&#xff0c;它可以模拟真实世界中的实体和过程。 在城市规划方面&#xff0c;数字孪生可以帮助城市规划师更加直观地了解城市的整体规划和发展趋势&…...

编程日记 2023/5/30 3:33:44

开心档之C++ 指针

C 指针 学习 C 的指针既简单又有趣。通过指针&#xff0c;可以简化一些 C 编程任务的执行&#xff0c;还有一些任务&#xff0c;如动态内存分配&#xff0c;没有指针是无法执行的。所以&#xff0c;想要成为一名优秀的 C 程序员&#xff0c;学习指针是很有必要的。 正如您所知…...

编程日记 2023/5/6 15:58:13

零基础搭建私人影音媒体平台【远程访问Jellyfin播放器】

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 转载自内网穿透工具的文章&#xff1a;零基础搭建私人影音媒体平台【远程访问Jelly…...

编程日记 2023/5/6 15:53:12

Abstract Expressionist

古董地图画集 10大最有名的抽象艺术家 抽象表现主义是现代许多不同艺术思想和表达流派中最奇特的艺术运动之一。这场运动开始从社会变革中涌现出来&#xff0c;恰逢第二次世界大战的最后几周和几个月。 这一次&#xff0c;来自世界各地的人们开始欢迎在经历了多年有史以来最致…...

编程日记 2023/5/29 17:09:19

【郭东白架构课 模块二：创造价值】24｜节点四：如何减少语义上的分歧？

你好&#xff0c;我是郭东白。上节课我们通过一个篇幅比较长的电商案例&#xff0c;详细展示了为什么在架构活动中会出现语义分歧。同时也描述了&#xff0c;架构师在统一语义这个环节中所要创造的真正价值是什么。即&#xff0c;看到不同角色之间语境的差异&#xff0c;然后通…...

编程日记 2023/5/6 15:43:10

windows下免费本地部署类ChatGpt的国产ChatGLM-6B

ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT4 量化级别下最低只需 6GB 显存&#xff09;。 Chat…...

编程日记 2023/5/31 7:44:16

flask+opencv+实时滤镜(原图、黑白、怀旧、素描)

简介&#xff1a;滤镜&#xff0c;主要是用来实现图像的各种特殊效果。图像滤镜用于改变图像的视觉效果&#xff0c;使其具有特定的风格。下面是这三种滤镜的详细说明&#xff1a; 1、黑白&#xff08;Grayscale&#xff09;&#xff1a;黑白滤镜将彩色图像转换为灰度图像&…...

编程日记 2023/5/30 9:51:38

【SCI征稿】极速送审，中科院2区（TOP）计算机算法类SCI，数据库稳定检索19年

算法类&#xff1a; 检索年份&#xff1a;数据库稳定检索19年 自引率&#xff1a;14.50% 国人占比&#xff1a;22.78% 期刊简介&#xff1a;IF&#xff1a;8.0-9.0&#xff0c;JCR1区&#xff0c;中科院2区&#xff08;TOP&#xff09; 检索情况&#xff1a;SCI&EI 双…...

编程日记 2023/5/30 2:41:15

1992-2022年31省GDP、第一产业增加值、第二产业增加值 第三产业增加值

1992-2022年31省GDP、第一产业增加值、第二产业增加值 第三产业增加值 1、时间&#xff1a;1992-2022年 2、范围&#xff1a;包括31省 3、指标&#xff1a;省GDP、省第一产业增加值、省第二产业增加值、省第三产业增加值 4、缺失情况说明&#xff1a;无缺失 5、来源&#…...

编程日记 2023/5/6 15:23:05

100种思维模型之万物系统思维模型-57

前面我们介绍过 “万物联系思维模型” &#xff0c;即万物之间存有各种各样的联系&#xff0c;在解决问题时要看到事物之间的连接&#xff0c;并找到关键的连接&#xff0c;继而快速的解决问题。 01 何谓万物系统思维模型 一、万物系统思维 人的思维习惯&#xff0c; 一…...

编程日记 2023/5/6 15:18:04

Java 中的包装类是什么？如何使用包装类来操作基本数据类型(二十二)

Java 中的包装类是一种特殊的类&#xff0c;用来将基本数据类型&#xff08;如 int、double、char 等&#xff09;包装成对象。包装类的作用是可以让基本数据类型具有对象的特性&#xff0c;比如可以作为参数传递给泛型类或方法&#xff0c;可以调用对象的方法&#xff0c;可以…...

编程日记 2023/5/30 0:48:46

【Python入门】Pycharm的使用指南

前言 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff0c;喜爱音乐的一位博主。 &#x1f4d7;本文收录于Python零基础入门系列&#xff0c;本专栏主要内容为Python基础语法、判断、循环语句、函…...

编程日记 2023/5/6 15:08:02

python搭建HaIcon物联平台！

Python是一种高级编程语言，易于学习和理解。它在各个领域都有着广泛的应用，例如数据科学、机器学习、爬虫等。 在Python的强大功能之外，Python还有着丰富的第三方库和框架，其中之一就是HaIcon。HaIcon是一种基于Python的物联网平台，它提供了完整的解决方案，包括设备管理…...

编程日记 2023/5/6 15:03:00

GUI编程（二）

Swing Swing是GUI&#xff08;图形用户界面&#xff09;开发工具包。 早期的AWT&#xff08;抽象窗口工具包&#xff09;组件开发的图形用户界面&#xff0c;要依赖本地系统&#xff0c;当把AWT组件开发的应用程序移植到其他平台的系统上运行时&#xff0c;不能保证其外观风格…...

编程日记 2023/5/6 14:58:00

俩小伙一晚上写了个 AI 应用，月入两万？？(文末附开发教程)

开发出一款能够与 AI 对话生成和编辑思维导图的工具&#xff0c;听起来似乎只能是一群专业的 AI 背景团队花费大量的时间和精力训练模型&#xff0c;打磨应用才能完成的事情。 但是&#xff0c;两名大学生却在一夜之间完成了&#xff0c;就像炼金术士将庸俗的材料转化成黄金一…...

编程日记 2023/5/6 14:52:58

Python爬虫常用框架

大家都知道python是一门多岗位编程语言&#xff0c;学习python之后可以从事的岗位有很多&#xff0c;python爬虫便在其中&#xff0c;不过很多人对python不是很了解&#xff0c;所以也不知道python爬虫是什么&#xff0c;接下来小编为大家介绍一下。 Python是一门非常适合开发…...

编程日记 2023/5/6 14:47:56

2023亚马逊云科技研究，数字化技能为中国企业和员工带来经济效益

在中国&#xff0c;信息技术在个人、企业和宏观经济层面都推动着重大变革。为了研究这些变化所带来的影响&#xff0c;盖洛普咨询公司(Gallup)和亚马逊云科技开展了关于数字化技能的调研。 研究表明&#xff0c;数字化技能正在为中国企业和在职人员带来巨大的经济价值&#x…...

编程日记 2023/5/6 14:42:55

springboot使用mybatis

扫描mapper接口的位置&#xff0c;生成代理对象 在application.properties配置数据源 测试: 在application.properties配置mybaits&#xff0c;支持驼峰命名&#xff0c;下划线 结果映射: Insert语句例子 在application.properties配置日志 更新 总结: 结果复用 ResultMap第二种…...

编程日记 2023/5/6 14:37:54

为什么是三次握手和四次挥手

文章目录 为什么是三次握手为什么是四次挥手什么是TIME_WAIT状态解决TIME_WAIT状态引起的bind失败的方法 为什么是三次握手 因为这是双方都有收发的最小次数 握手的目的&#xff1a;确认网络好着没&#xff0c;对方好着没 确认双方主机是否健康&#xff08;双方&#xff09;…...

编程日记 2023/5/6 14:32:53

Codeforces Round 867 (Div 3) 总结

文章目录 ABCDE 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 Dashboard - Codeforces Round 867 (Div. 3) - Codeforces A 题目大意&#xff1a;有n个电视节目&#xff0c;每个电视节目占据一定的时间&#xff0c;并且具有一个娱乐值&#xff0c;一秒可以额换一次台…...

编程日记 2023/5/6 14:27:52

vue修饰符的使用

事件修饰符&#xff1a; 在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用&#xff0c;但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。 为解决这一问题&#xff0c;Vue 为 v-on 提供了事件…...

编程日记 2023/5/6 14:22:51

2023年五一数学建模 B 题过程与结果

文章目录 第一问第二问数据时序分析Auto-ARIMA第二问求解解的情况A->Q:D-> AQ-V总快递数 第三问第四问遗传算法求解 第五问SARIMA 模型拟合季节性规律 第一问 见 2023 年 五一杯 B 题过程 代码&#xff08;第一问&#xff09; 第二问 第二问考虑是一个时序预测问题&a…...

编程日记 2023/5/6 14:17:49

搞懂 API ，API 中 URI 设计规范分享

API&#xff08;Application Programming Interface&#xff09;是现代软件开发中的一项关键技术&#xff0c;它为不同应用程序间提供了数据和功能交互的标准化方式。而 URI&#xff08;Uniform Resource Identifier&#xff09;作为 API 中的重要部分&#xff0c;其规范和良好…...

编程日记 2023/5/6 14:12:48

【DarkLabel】使用教程（标注MOT数据集）

DarkLabel 使用教程 功能部分 Open video 第 2 处的内容为数据集类型。例如&#xff1a;VOC、COCO、MOT、YOLO等。 第 3 处的内容为标签名称。 可在 darklabel.yml 中修改 classes_set。例如&#xff1a;classes_set: "mot_classes" 第 4 处的内容为两种跟踪方法…...

编程日记 2023/5/6 14:07:46

万网x3主机l系统放两个网站/关键词推广排名

! 下面的工具适合于redis 哨兵模式&#xff0c;不适合于redis cluster模式&#xff01; 在redis cluster模式下&#xff0c;执行redis-dump&#xff0c;会碰到下面的问题。 CROSSSLOT Keys in request dont hash to the same slot redis dump 推荐一个redis cluster下的迁移…...

编程日记 2024/11/18 1:29:41

网站设计 线框图/网站广告费一般多少钱

一、配置文件 spring配置文件可以通过如下例子进行拆分使配置文件只在某一种环境下适用。任何Component or Configuration被Profile修饰的都会在加载的时候被限制&#xff0c;比如下面的例子&#xff1a; Configuration Profile("production") public class Producti…...

编程日记 2024/11/18 1:02:08

青海做网站哪家好/百度网站客服电话

导出整个数据库到SQL mysqldump -h localhost -u user-p dbname> /home/bao/test.sql 然后输入密码&#xff0c;确认 导出数据库的某张表到 sql mysqldump -h localhost -u user -p dbname some_table_name> /home/bao/test.sql 导出数据库所有表结构 mysqldump -…...

编程日记 2024/11/17 19:28:05

兴国做网站/上首页seo

小程序的视图与渲染 组件的基本使用 在官方文档当中&#xff0c;我们可以找到组件一栏&#xff0c;在那里就可以学习到基本组件的使用了。 数据绑定 在.wxss中通过{{}}就可以定义数据的变量名称&#xff0c;而在.js文件中的data就可以对数据进行初始化&#xff0c;这就完成…...

编程日记 2024/11/17 17:59:59

影视网站怎么做app/上海有哪些优化网站推广公司

用vue做桌面应用程序设定精灵 (Setup Wizard) This page allows you to pick and install multiple apps at once through your macs terminal using brew. 该页面允许您使用brew通过Mac终端一次选择并安装多个应用程序。 View Demo 查看演示 View Github 查看Github 指令 (Co…...

编程日记 2024/11/17 17:19:26

门户网站模板 免费/专业seo网站优化推广排名教程

好程序员web前端教程分享JavaScript验证API&#xff0c;小编每天会分享一下干货给大家。那么今天说道的就是web前端培训课程中的章节。JavaScript验证API约束验证DOM方法PropertyDescriptioncheckValidity()如果 input 元素中的数据是合法的返回 true&#xff0c;否则返回 fals…...

编程日记 2024/11/17 14:14:06