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

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

news 2026/3/26 20:39:15

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

2026年AI大爆发：DeepSeek、Claude、Gemini三强鼎立，智能体应用成为新战场

进入2026年&#xff0c;AI领域迎来前所未有的激烈竞争格局。DeepSeek凭借极低的训练成本和开源策略强势出圈&#xff0c;R1模型在推理能力上直追GPT-o1&#xff0c;引发全球AI圈震动&#xff1b;Anthropic的Claude 3.7 Sonnet推出了扩展思考模式&#xff0c;在代码和复杂推理任…...

编程新知 2026/3/26 19:51:33

双模型混搭方案：OpenClaw同时接入百川2-13B与Qwen的实操演示

双模型混搭方案&#xff1a;OpenClaw同时接入百川2-13B与Qwen的实操演示 1. 为什么需要多模型混搭&#xff1f; 去年冬天&#xff0c;当我第一次尝试用OpenClaw自动化处理技术文档时&#xff0c;发现一个有趣的现象&#xff1a;同一个模型在不同任务上的表现差异巨大。Qwen在…...

编程新知 2026/3/26 19:23:04

1564286-24-3，Cy5 DBCO SE，应用于生物分子标记、分子成像

一.名称英文名称&#xff1a;Cy5 DBCO NHS Ester&#xff0c;Cy5 DBCO SE&#xff0c;Cyanine5 DBCO NHS Ester&#xff0c;Cy5 Dibenzocyclooctyne NHS Ester中文名称&#xff1a;Cy5-二苯并环辛炔-NHS 酯&#xff0c;花菁染料Cy5-二苯并环辛炔-琥珀酰亚胺酯CAS 号&#xff1a…...

编程新知 2026/3/26 19:14:55

深入解析服务器License管理：从基础命令到实战应用

1. 服务器License管理&#xff1a;为什么它比你想的更重要 如果你管理过服务器&#xff0c;尤其是那些运行着像CAD、EDA、仿真分析这类专业软件的服务器&#xff0c;那你肯定对“License”这个词不陌生。它就像软件的“通行证”&#xff0c;没有它&#xff0c;再强大的硬件也只…...

编程新知 2026/3/26 18:48:39

VIIRS在灾害监测中的实战应用：以洪水检测为例的Python代码解析

VIIRS在灾害监测中的实战应用&#xff1a;以洪水检测为例的Python代码解析 当洪水席卷城镇时&#xff0c;每一分钟的响应延迟都可能意味着更多生命财产的损失。VIIRS&#xff08;可见光红外成像辐射计套件&#xff09;作为NASA灾害监测系统的"鹰眼"&#xff0c;其375…...

编程新知 2026/3/26 17:55:54

Andi活码，最简单好用！

上链接&#xff1a; https://app.andi.cn/qr/ 试用过这么多群聊二维码的活码工具。 真正好用的是我推荐的这款Andi活码。 免登录、打开即用。单屏管理&#xff0c;超简单好用。 优威科技有限公司出品。 承诺永久免费长期支持。 稳定可靠好用&#xff01; 不信我来用一下…...

编程新知 2026/3/26 17:25:36

从ChatGPT到机器翻译：GRPO算法如何优化大语言模型的生成效果？

GRPO算法&#xff1a;大语言模型生成效果优化的新范式 在自然语言处理领域&#xff0c;序列生成任务的质量优化一直是研究热点。从ChatGPT的对话流畅度到机器翻译的准确性&#xff0c;生成效果直接影响用户体验。传统优化方法如PPO虽然有效&#xff0c;但在处理复杂语言任务时存…...

编程新知 2026/3/26 16:33:14

深入解析iOS中CUICatalog: Invalid asset name警告的解决方案与优化实践

1. 理解CUICatalog: Invalid asset name警告的本质 当你正在调试iOS应用时&#xff0c;突然在控制台看到一堆[framework] CUICatalog: Invalid asset name supplied: 的警告信息&#xff0c;这感觉就像开车时仪表盘突然亮起故障灯。作为开发者&#xff0c;我们首先需要理解这个…...

编程新知 2026/3/26 16:08:53

滚动轴承动力学模型代码复现及三维模型SolidWorks文件分享

滚动轴承动力学模型代码 #指定了某篇paper复现&#xff0c;具体都如图打包在文件夹了&#xff0c;保证程序可以打开。 给出轴承三维模型solidworks软件打开2019版本可以打开。打开SolidWorks轴承模型时&#xff0c;金属滚珠与保持架的精密配合让人想起小时候拆解机械闹钟的经历…...

编程新知 2026/3/26 15:50:39

Fillinger终极指南：Illustrator智能填充脚本如何10倍提升你的设计效率

Fillinger终极指南&#xff1a;Illustrator智能填充脚本如何10倍提升你的设计效率 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 你是否曾在Illustrator中为了填充图案而花费数小时…...

编程新知 2026/3/26 15:42:21