标签：less color 张海藩 第六版 theme 软件工程 antd path loader
总述
第一章目的：因为有软件危机，所以我们需要一种方法来减少危机，规范化。
第二章：可行性研究：研究软件能不能开发
第三章：需求分析：可以开发之后，明确一个软件的最基本的功能
第四章：形式化说明技术：开发软件所使用的形式化的方法
第五章：在大的一个范围去设计如何实现一个功能
第六章：详细设计：详细的设计每个部分的功能如何实现
第七章：实现：代码实现，真正的开工
第八章：维护：维护软件
第九章：面向对象方法学引论：传统的方法对于大的工程有局限性，所以引用一个新的面向对象的方法
（图统一放在最后）
软件工程学概述
1.1 软件危机的介绍：
1.1.1不可维护，用户不满意，软件质量差，没有文档资料，对软件开发成本和进度不准确，软件成本上升，软件开发速度跟不上需要的速度
1.1.2产生的原因：（1）管理和控制软件开发过程相当困难(2)规模庞大，且程序复杂性将随着程序规模的增加而呈指数上升
1.2 软件工程
软件工程定义：(1)把工程应用于软件（2）研究（3）途径
1.2.3 软件工程方法学：三要素：方法（怎样做），工具，过程
面向对象方法学：对象+类+继承+用消息通信
1.3 软件生命周期
概括的说：软件定义，软件开发，运行维护
1.4 软件过程
定义：软件过程是为了获得高质量软件所需要完成的一系列任务的框架，规定了完成的步骤
1.4.1 瀑布模型
特点：阶段间具有顺序性和依赖性，推迟实现的观点，质量保证的观点
简单理解：做一步，写一个文档，然后对文档审核，正确了再做下一步（反馈环）
1.4.2 快速模型
简单理解：先快速建立一个有一个功能的程序，然后给用户使用，接着更好调整（无反馈环）。
1.4.3 增量模型
一开始实现一个功能，然后给用户使用，之后就是在原来基础上增加新的功能，就是将整体化个体
1.4.4 螺旋模型
每个阶段之前加了风险分析过程的快速原型模型，是以风险驱动的
1.4.5 喷泉模型（面向对象方法学）
迭代是软件开发过程中普遍存在的一种内在属性
因为整个开发的核心都是对象，各阶段都使用统一的概念和表示符号，所以整个开发过程是无缝的，这自然就很容易实现各个开发步骤的反复多次迭代，达到认识的逐步深化，而喷泉模型则很好的体现了面向对象软件开发过程迭代和无缝的特性
软件定义
第二章：可行性研究
目的：用最小的代价在尽可能短的时间内确定问题是否能够解决
实质：在较高层次上以比较抽象的方式进行的系统分析和设计的过程
方面：技术可行性，经济可行性，操作可行性
小重点系统流程图：黑·盒子·描绘物理系统，是物理数据流图
重点 数据流图：只考虑对数据的处理
小重点 数据字典：对数据流图里的数据的信息集合，由对 数据流，数据元素，数据存储，处理定义组成
3种基本类型：顺序，选择，重复
用途：作为分析阶段的工具，避免许多麻烦的接口问题
文件：590m.com/f/25127180-496364361-2aa3a1（访问密码：551685）
以下内容无关：
-------------------------------------------分割线---------------------------------------------
最近做了一个需求，后台管理系统添加一个可以动态修改ant-design主题色。查询了大多数的文章，发现基本都是抄来抄去，而且文章记录的也一点也不详细。刚刚把这个功能做完了，顺便记录一下如何去修改主题色。主要使用到的包是antd-theme-generator。使用起来非常方便，而且在热更新时，不会出现 js 内存爆栈现象。
主题思想：主要使用 antd 的 less 变量，修改全局的 less 变量，完成样式的更新。以下是 less 等版本信息。
案例网址: https://azhengpersonalblog.top/react-ant-admin/
项目截图
{
“antd”: “^4.15.5”,
“antd-theme-generator”: “^1.2.5”,
“babel-plugin-import”: “^1.13.3”,
“less”: “^4.1.1”,
“less-loader”: “^5.0.0”,
“style-resources-loader”: “^1.4.1”
}
- 首先使用create-react-app脚手架来创建一个项目ant-theme。
D:>npx create-react-app ant-theme - 使用npm run eject弹射出webpack等配置文件
D:\ant-theme>npm run eject - 安装antd-theme-generator依赖
D:\ant-theme>cnpm i antd-theme-generator -D
或者
D:\ant-theme>npm i antd-theme-generator -D - 在根目录下新建文件color.js,代码如下所示
const { generateTheme } = require(“antd-theme-generator”);
const path = require(“path”);
const options = {
antDir: path.join(__dirname, “./node_modules/antd”),
stylesDir: path.join(__dirname, “./src”), // all files with .less extension will be processed
varFile: path.join(__dirname, “./src/assets/theme/var.less”), // default path is Ant Design default.less file
themeVariables: [
“@primary-color”,
“@link-color”,
“@success-color”,
“@warning-color”,
“@error-color”,
“@layout-text”,
“@layout-background”,
“@heading-color”,
“@text-color”,
“@text-color-secondary”,
“@disabled-color”,
“@border-color-base”,
],
outputFilePath: path.join(__dirname, “./public/color.less”),
};
generateTheme(options)
.then((less) => {
console.log(“Theme generated successfully”);
})
.catch((error) => {
console.log(“Error”, error);
});
5. 修改public/index.html,代码如下：
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
module.exports = function (webpackEnv) {
return {
//…
module: {
rules: [
// …
{
oneOf: [
// …
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
}),
sideEffects: true,
},
{
test: cssModuleRegex,
use: [
…getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}),
],
},
// less 文件匹配
{
test: lessRegex,
exclude: lessModuleRegex,
use: [
{
loader: “css-loader”,
},
{
loader: “less-loader”,
options: {
javascriptEnabled: true,
},
},
//全局引入公共的less 文件 需要安装 style-resources-loader 包
{
loader: “style-resources-loader”,
options: {
patterns: path.resolve(
paths.appSrc,
“assets/theme/var.less”
},
},
],
sideEffects: true,
},
{
test: lessModuleRegex,
use: [
{
loader: “css-loader”,
},
{
loader: “less-loader”,
options: {
javascriptEnabled: true,
},
},
],
},
],
},
],
},
};
};
7. 新增src/assets/theme/var.less文件，在里面定义 less 全局变量达到控制主题色。
@primary-color: rgb(24, 144, 255); // 全局主色
@link-color: rgb(24, 144, 255); // 链接色
@success-color: rgb(82, 196, 26); // 成功色
@warning-color: rgb(250, 173, 20); // 警告色
@error-color: rgb(245, 34, 45); // 错误色
@layout-text: rgb(241, 240, 240); // 布局字体色
@layout-background: rgba(0, 0, 0, 0.85); // 布局背景色
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-color-base: #d9d9d9; // 边框色
8. 修改package.json文件的启动脚本。
{
“scripts”: {
“start”: “node color && node scripts/start.js”,
“build”: “node color && node scripts/build.js”
}
}
9. 使用 npm 脚本运行项目
D:\ant-theme>npm run start
运行成功打开浏览器输入 http://localhost:3000/ 即可。
打开控制台，控制台输入以下代码检查是否修改生效！
window.less.modifyVars({
“@primary-color”: “red”,
});
如图，导入的 antd 的 button 组件背景色变成了红色。自定义的 less 文件引用的@primary-color也变成了红色！
修改less变量
现在可以在 react 组件里使用window.less.modifyVars方法来修改主题变量色了！
如何在组件里的 less 文件使用 less 变量。
还记得开始配置config/webpack.config.js文件吗？在 less 正则匹配的 loader 里往后添加一个style-resources-loader配置即可
style-resources-loader
使用注意
如果在启动项目后，在去动态修改src/assets/theme/var.less里的全局 less 变量或者在组件 less 文件中修改或者引入 less 全局变量，会出现热更新不生效，还需重启项目才能发生变化。
标签：less,color,张海藩,第六版,theme,软件工程,antd,path,loader 来源： https://blog.csdn.net/weixin_43322764/article/details/116999883
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。