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

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

news 2025/9/14 16:58:46

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/9/14 3:07:02

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/9/7 2:04:00

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/9/13 17:41:17

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/9/2 21:18:16

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/9/3 11:48:38

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/9/14 16:27:40

【深度学习新浪潮】什么是credit assignment problem？

Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...

编程新知 2025/9/9 10:06:25

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/9/10 13:13:28

字符串哈希+KMP

P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...

编程新知 2025/7/25 9:01:52