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

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

news 2025/10/31 14:03:04

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/10/29 12:08:57

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/10/29 20:22:26

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/10/16 13:08:30

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/7/20 15:22:30

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/10/30 5:09:33

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/10/27 0:27:44

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25