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

【前端项目笔记】1 登录与登出功能实现

news 2026/2/10 11:51:31

项目笔记

☆☆代表面试常见题

前后端分离：后端负责写接口，前端负责调接口。
在这里插入图片描述

登录/退出功能

登录业务流程

登录页面：用户名+密码
调用后台接口进行验证
通过验证，根据后台响应状态跳到项目主页

登录业务相关技术点：
http是无状态的（登陆成功后记录状态，下面两种方式）
（1）cookie在客户端记录状态（node.js）
session在服务器端记录状态（node.js）
（2）token维持状态
服务器与前端之间Vue可能有一个跨域的问题
如果前端与后台接口不存在跨域问题——用cookie、session
存在跨域问题——用token
PS：一些跨域问题（来自博主 ^^为欢几何^^）
什么是跨域问题
向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域。
例如：就是从 A 向 B 发请求，如若他们的地址协议、域名、端口号有一个不相同，直接访问就会造成无法获取服务器发送的数据的现象。
指的是浏览器不能执行其他网站的脚本。 它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。
造成跨域问题的原因
1.浏览器规定：浏览器在解析Ajax请求时，要求浏览器的路径与Ajax的请求的路径必须满足三个要求，则满足同源策略，可以访问服务器。也就是说跨域问题是出现在浏览器与服务器之间，而服务器与服务器之间不存在跨域问题。
2.何为同源策略：同源指的是两个页面具有相同的协议、主机和端口，三者有任一不相同即会产生跨域。
如下图中的协议、域名、端口号分别为：
协议：http ； 域名：localhost ;端口号：5000
协议：http ； 域名：localhost ;端口号：8080
在这里插入图片描述

token原理分析
服务器提供接口，客户端需要通过Ajax访问这些接口
token由服务器生成，每个用户的token值不同
token记录登录状态，后续所有请求都要携带这个token，验证你是哪个用户
token用于身份校验，是保证登录成功后的唯一身份令牌
在这里插入图片描述

登录功能实现

el-form（表单）
el-form-item（用户名+密码+登录按钮+重置按钮）
el-input（文本输入框）
el-button （按钮）
字体图标（用户名和密码之前的小图标）

☆☆git 相关命令
git checkout -b login 创建一个叫login的分支，通过checkout命令切换到这个分支上
git branch 查看当前项的所有分支（*表示正处于此分支）
git status 查看源代码文件修改状态
在这里插入图片描述
git add . 上传所有修改文件（包括新增文件）
git commit -m "完成了登录功能" 提交代码（-m指提交的备注消息）
git checkout master 切换到master分支
git merge login 把login分支合并到master分支（先切换到master分支，再使用 git merge）
git push 本地代码推送到云端
git push -u origin login 把云端不存在的本地分支login推送到云端

CSS盒子放在页面正中间：

/* 居中 */
position: absolute;
// 距离顶部和左部各50%
left: 50%;
top: 50%;
// 横轴纵轴都往回移动50%
transform: translate(-50%, -50%);

☆☆水平居中：
方式1：position + transform(针对子元素)：

position: absolute;
left: 50%;
// 横轴向左移动自身的50%
transform: translate(-50%);

方式2：flex (针对父元素):

.parent {display: flex;justify-content: center;
}

☆☆垂直居中：

☆☆CSS中的单位：
（1）长度单位：
px：像素，计算机屏幕上的一个点
em： 相对长度单位。1em等于当前字体尺寸，会继承父元素字体大小，2em等于当前字体尺寸的两倍，如果某元素以 16px 显示，那么 2em 是32px。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
%：百分比
（2）时间单位
s：秒
ms：毫秒
（3）角度单位
deg：度数
in：英寸
rad：弧度
grad：梯度
（4）重量单位
kg：千克
g：克
mg：毫克
（5）频率单位
Hz：赫兹
kHz：千赫兹
（6）分辨率单位
dpi：点每英寸
dpcm：点每厘米

/* 设置元素宽度为100像素 */
div {width: 100px;
}/* 设置元素字体大小为1.5em */
p {font-size: 1.5em; /* 如果父元素的字体大小是20px，则计算出的字体大小是30px */
}/* 设置元素延迟动画时间为500毫秒 */
@keyframes example {from {background-color: red;}to {background-color: yellow;}
}div {animation-name: example;animation-duration: 500ms;
}/* 设置元素的透明度为50% */
div {opacity: 0.5;
}

关于less语法（来自博主苦海123）：
CSS是一门非程序语言，没有变量、函数、作用域等，此时使用rem单位就会出现图片等大量计算尺寸的问题，但是less可以轻松实现运算，它是CSS预处理语言，引入了变量、混入、函数等，常见的CSS预处理语言还有：Sass、Stylus等，Less中文网址：http://lesscss.cn

嵌套：在less中可以像html一样，如果标签是父子级关系，可以嵌套书写，编写后会生成对应的父子级形式的选择器，less语法中伪类伪元素前面要加 & 符号才表示当前元素的伪类，否则表示此元素的子代伪元素，如：

<!-- 结构 -->
<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png" alt=""></div></div></div>
</template><!-- 样式 -->
<!-- 支持less语法格式 -->
<!-- scoped只在当前节点下生效，去除则全局生效 -->
<style lang="less" scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}.login_box {width: 450px;height: 300px;background-color: #fff;.avatar_box {height: 130px;width: 130px;img {width: 100%;height: 100%;}}
}
</style>

Element ui是啥
Element UI 是一个基于Vue.js 的UI框架，它提供了一套丰富的组件和样式，帮助开发者快速构建美观、易用的Web应用程序。Element UI的组件包括但不限于表单、表格、弹窗、按钮、菜单等常见的UI元素，同时也提供了响应式的布局和主题定制等功能，以满足不同场景下的需求。Element UI的文档详细、易懂，社区活跃，是Vue.js生态中非常受欢迎的UI框架之一。12
Element UI由国内的饿了么团队开发并开源，专为开发者提供了一套优雅而灵活的UI组件。它包含了各种常用的Web组件，如按钮、表单、导航等，以及高级组件，如日期选择器、对话框等。Element UI的设计风格简洁美观，易于定制，使其成为许多Vue.js项目的首选UI框架。
此外，Element UI的安装和使用也非常简便。可以通过npm进行安装，安装成功后，可以在项目中通过引入相应的js和css文件来使用Element UI的组件库。

☆☆☆ flex弹性布局基本知识
（1）flex布局父项常见属性：

display:flex;

// 内容布局方向: 从主轴头部开始 / 从主轴尾部开始 / 居中 / 平分 / 两边贴边剩余平分
justify-content: flex-start / felx-end / center / space-around / space-between;
// 主轴方向：横轴 / 纵轴
flex-direction: row / column;
// 单行/侧轴 排列子元素的方式：stretch 拉伸
align-items: flex-start / flex-end / center / stretch;
// 多行/侧轴 排列子元素的方式
align-content: flex-start / flex-end / center / stretch / space-around / space-between;
// 是否换行：不换行 / 换行
flex-wrap: nowrap / warp;
// 将flex-wrap 与 flex-direction 复合
flex-flow: row / column  nowrap / wrap;

（2）flex布局子项常见属性：
flex-grow: 规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。 主尺寸是项的宽度或高度，这取决于flex-direction值。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。如果父盒子未设宽度，那么flex为0的子盒子就是元素自身的宽度。

flex-shrink: 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认是1，等比例缩小；如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。（图片来自＊且听风吟）
在这里插入图片描述
在这里插入图片描述

flex-basis: 表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。它的初始值是 auto，此时浏览器会检查元素是否设置了 width 属性值。如果有，则使用 width 的值作为 flex-basis 的值；如果没有，则用元素内容自身的大小。如果 flex-basis 的值不是 auto，width 属性会被忽略。当width为0的时候，我们是看不到元素的。但当flex-basis为0,或者为auto并且width没有设置值的时候(默认值为0)，该元素的大小是由内容大小决定的。也就是只要有内容，flex-basis是不会看不到元素的。
设为auto和0也是有区别的。一个最明显的区别就是为0的时候，如果内容文字有空格是自动换行的。这个可以通过设置white space:nowrap解决。auto就没有这个问题。 flex-basis: 0​ 意味着项目不会根据内容调整初始大小，而 ​flex-basis: auto​ 则允许项目根据内容或显式设置的尺寸来调整初始大小。

flex布局定义子项目剩余空间，表示占用份数

// 表示占用2份
flex: 2;

在这里插入图片描述
flex是flex-grow、flex-shrink、flex-basis三个属性的复合（默认：0 1 auto）
注意，flex:1和只写一个flex-grow:1是不一样的。
写成flex:1，flex-shrink,flex-basis的默认值是1和0%。
而写成flex-grow:1,flex-shrink,flex-basis的默认值是1和auto。也就是flex-basis是不同的。

align-self 定义子项目在侧轴上的排列方式

align-self:flex-start / flex-end / center / stretch;

order 定义子项目排列顺序，数量越小越靠前，默认为0

☆☆box-sizing 为border-box和content-box的区别：
content-box(标准W3C盒模型，默认): 块总宽度=width+margin+padding+border
在这里插入图片描述

border-box(IE盒模型):块总宽度=width(包含padding+border)+margin
在这里插入图片描述
内边距padding（上右下左）：

/* 应用于所有边 */
padding: 1em;/* 上边下边 | 左边右边 */
padding: 5% 10%;/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

表单验证

(1) 为el-form通过属性绑定指定rules校验对象
(2) 在data中定义校验对象，每一个属性都是一个验证规则
(3) 为el-form-item通过prop项指定验证规则
在这里插入图片描述
在这里插入图片描述

重置

（1）拿到表单的实例对象，使用ref引用
（2）通过this访问到$refs.引用对象，再使用表单的重置函数
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

登录前的预验证

发起请求前对表单数据进行预验证，通过后发起登录请求，否则提醒用户表单数据不合法。
（1）先获取到表单的引用对象
（2）再调用引用对象的valid函数进行表单的预校验，在valid中接收一个回调函数，其中第一个形参是验证结果boolean，通过这个boolean判断验证是否通过
在这里插入图片描述

根据预验证结果是否发起登录请求

涉及到箭头函数、promise、async、await、异步处理
在这里插入图片描述

登录状态的弹窗提示

导入element-ui导入Message
Message需要进行全局挂载，挂载为Vue原型上的一个属性
Vue.prototype. m e s s a g e = M e s s a g e 在每个组件中可使用 t h i s . message = Message 在每个组件中可使用this. message=Message在每个组件中可使用this.message中的方法

登录组件登录成功之后的行为

1．将登录成功之后服务器分配的token，保存到客户端的sessionStorage中
1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问（token相当于通行证，记录已经登录）
1.2 token只应在当前网站打开期间生效，所以将token保存在 sessionStorage中（localStorage是持久化的存储机制，sessionStorage是会话期间的存储机制）
2．通过编程式导航跳转到后台主页，路由地址是/home
sessionStorage & localStorage

路由导航守卫控制访问权限

home页面只能在登录状态下才能访问。如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。
在这里插入图片描述

退出功能

销毁本地的token，再重定向到登录页
在这里插入图片描述

相关文章：

【前端项目笔记】1 登录与登出功能实现

项目笔记 ☆☆代表面试常见题 前后端分离&#xff1a;后端负责写接口&#xff0c;前端负责调接口。 登录/退出功能 登录业务流程 登录页面&#xff1a;用户名密码 调用后台接口进行验证 通过验证&#xff0c;根据后台响应状态跳到项目主页 登录业务相关技术点&#xff1…...

编程日记 2024/6/14 5:30:14

是字符串定义以及在C语言中字符串是如何表示的

字符串&#xff08;String&#xff09;是由零个或多个字符&#xff08;包括空格&#xff09;组成的有限序列&#xff0c;常用于文本数据的存储和处理。在编程中&#xff0c;字符串是常见的数据类型。 在C语言中&#xff0c;字符串不是一种内置的数据类型&#xff0c;但C语言提…...

编程日记 2024/6/14 5:29:13

辽宁普通测径仪升级智能测径仪后都有哪些改进?

关键字: 普通测径仪, 智能测径仪, 测径仪升级, 测径仪特点, 智能测径仪优势, 目前多数厂家测径仪的数据处理方式是单片机计算出最终结果&#xff0c;然后传输到工控机后期处理。这样的电路系统对轧钢现场的高温、高粉尘和强电磁干扰的环境适应性很差&#xff0c;使得同一厂家、…...

编程日记 2024/6/14 5:27:11

【微信小程序】事件分类以及阻止事件冒泡

在微信小程序中&#xff0c;事件分为冒泡事件和非冒泡事件两大类&#xff0c;它们的区别在于事件是否能从原始触发组件开始&#xff0c;向父级组件传播&#xff08;即“冒泡”&#xff09;。 冒泡事件&#xff1a;当一个组件上的事件被触发后&#xff0c;不仅当前组件会接收到这…...

编程日记 2024/6/14 5:26:10

踩坑！被node-sass折磨的一天

文章目录 被node-sass折磨的一天折磨过程了解原因注意事项 被node-sass折磨的一天 折磨过程 起因是要开发一个老项目&#xff0c;照常拉代码、下依赖、启动三步走 依赖开始下载不对了&#xff0c;以为是node版本问题&#xff0c;寻找node-sass对应的node版本 利用nvm&#…...

编程日记 2024/6/14 5:25:08

App UI 风格打造独特体验

App UI 风格打造独特体验...

编程日记 2024/6/14 5:24:07

【学习笔记8】阅读StyleID论文源码

论文【链接】 源码【链接】 一、DDIM eta ddim_step表示执行几轮去噪迭代&#xff0c;eta表示DDPM和DDIM的插值系数。当eta0时&#xff0c;为DDPM&#xff1b;当eta≠0时&#xff0c;为DDIM。 参考 DDIM 简明讲解与 PyTorch 实现&#xff1a;加速扩散模型采样的通用方法 【s…...

编程日记 2024/6/14 5:23:06

wordpress旅游网站模板

旅行社wordpress主题 简洁实用的旅行社wordpress主题&#xff0c;适用于旅行社建网站的wordpress主题模板。 https://www.jianzhanpress.com/?p4296 旅游WordPress主题 简洁实用的旅游WordPress主题&#xff0c;适合做旅游公司网站的WordPress主题模板。 https://www.jian…...

编程日记 2024/6/14 5:21:04

vs2019 c++20规范 STL 库中头文件 ＜atomic＞ 源码注释及探讨几个知识点

&#xff08;1 探讨一&#xff09; 模板类 atomic 的继承关系与数据结构如下&#xff1a; (2 探讨二 ) 可见 atomic 的 fetch_xx 函数&#xff0c;返回的都是 atomic 中存储的旧值。测试如下&#xff1a; 谢谢...

编程日记 2024/6/14 5:20:03

Flink任务如何跑起来之 2.算子 StreamOperator

Flink任务如何跑起来之 2.算子 StreamOperator 前文介绍了Transformation创建过程&#xff0c;大多数情况下通过UDF完成DataStream转换中&#xff0c;生成的Transformation实例中&#xff0c;核心逻辑是封装了SimpleOperatorFactory实例。 UDF场景下&#xff0c;DataStream到…...

编程日记 2024/6/14 5:19:01

学习笔记——路由网络基础——路由优先级(preference)

1、路由优先级(preference) 路由优先级(preference)代表路由的优先程度。当路由器从多种不同的途径获知到达同一个目的网段的路由(这些路由的目的网络地址及网络掩码均相同)时&#xff0c;路由器会比较这些路由的优先级&#xff0c;优选优先级值最小的路由。 路由来源的优先…...

编程日记 2024/6/14 5:18:00

数据预处理——调整方差、标准化、归一化（Matlab、python）

对数据的预处理&#xff1a; (a)、调整数据的方差&#xff1b; (b)、标准化&#xff1a;将数据标准化为具有零均值和单位方差&#xff1b;&#xff08;均值方差归一化(Standardization)&#xff09; (c)、最值归一化&#xff0c;也称为离差标准化&#xff0c;是对原始数据的…...

编程日记 2024/6/14 5:16:58

opencv_特征检测和描述

理解特征 寻找独特的特定模式或特定特征&#xff0c;可以轻松跟踪和比较。 拼图&#xff1a;在图像中搜索这些特征&#xff0c;找到它们&#xff0c;在其他图像中查找相同的特征并对齐它们。而已。 基本上&#xff0c;角被认为是图像中的好特征。 在本单元中&#xff0c;我…...

编程日记 2024/6/14 5:15:57

CID引流电商下的3C产品选品策略深度解析

​摘要&#xff1a;随着电商行业的迅猛发展和消费者需求的日益多样化&#xff0c;CID引流电商作为一种新兴的电商模式&#xff0c;逐渐受到了广泛关注。在这一模式下&#xff0c;3C产品作为高客单价、高技术含量的代表品类&#xff0c;其选品策略的制定显得尤为重要。本文将从多…...

编程日记 2024/6/14 5:14:55

DeepSORT（目标跟踪算法）中的状态向量与状态转移矩阵

DeepSORT&#xff08;目标跟踪算法&#xff09;中的状态向量与状态转移矩阵 flyfish 状态转移矩阵&#xff08;State Transition Matrix&#xff09;F的构造 这篇是一定要看的&#xff0c;拖到文章的最后部分&#xff0c;需要理解状态转移矩阵怎么来的&#xff0c;怎么是这个…...

编程日记 2024/6/14 5:13:54

李宏毅深度学习01——基本概念简介

视频链接 基本概念 Regression&#xff08;回归&#xff09;&#xff1a; 类似于填空 Classification&#xff08;分类&#xff09;&#xff1a; 类似于选择 Structure Learning&#xff08;机器学习&#xff09;&#xff1a; &#xff1f;&#xff1f; 机器学习找对应函数…...

编程日记 2024/6/14 5:12:53

TcpClient 服务器、客户端连接

TcpClient 服务器 TcpListener 搭建tcp服务器的类&#xff0c;基于socket套接字通信的 1 创建服务器对象 TcpListener server new TcpListener(IPAddress.Parse("127.0.0.1"), 3000); 2 开启服务器 设置最大连接数 server.Start(1000); 3 接收客户端的链接,只能…...

编程日记 2024/6/14 5:07:49

13大最佳工程项目管理系统软件盘点

国内外主流的13款工程项目管理系统软件&#xff1a;Worktile、中建软件、泛微建筑项目管理软件、LiquidPlanner、Wrike、建文软件、广联达、Microsoft Project、泛普软件、Procore、Buildertrend、Fieldwire、Autodesk Construction Cloud。 在快速变化的工程领域&#xff0c;有…...

编程日记 2024/6/14 5:06:48

SpringMVC：拦截器（Interceptor）

1. 简介 拦截器&#xff08;Interceptor&#xff09;类似于过滤器&#xff08;Filter&#xff09; Spring MVC的拦截器作用是在请求到达控制器之前或之后进行拦截&#xff0c;可以对请求和响应进行一些特定的处理。拦截器可以用于很多场景下&#xff1a; 1. 登录验证&#xf…...

编程日记 2024/6/14 5:04:46

【Python】selenium使用find_element时解决【NoSuchWindowException】问题的方法

NoSuchWindowException 是 Selenium WebDriver 中的一种异常&#xff0c;当尝试切换到一个不存在的窗口时&#xff0c;或者在尝试获取窗口句柄时窗口已经关闭或不存在&#xff0c;就会抛出这个异常。 以下是一些解决 NoSuchWindowException 的常见方法&#xff1a; 检查窗口是…...

编程日记 2024/6/14 4:59:42

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2026/2/8 15:03:14

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/23 7:23:58

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2026/2/5 3:29:13

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/2/10 6:39:48

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2026/1/31 9:29:45