说在前，本文主要涉及以下功能点：
- 基于antd组件皮肤定制
- 通过less定义全局样式变量，也可以在vue组件的style标签中使用
- 引用字体
- svg icon图标集合，与iconfont网站命名统一
- icon组件yIcon
第一次写文章没有啥经验，说了很多废话，批评指正。废话不多说了，进入正题！
背景
项目框架VUE2，组件antd design vue，项目老旧，样式多而杂
需求
针对项目定制一套公司特色的样式
规范内容
规范分为了两个部分：视觉规范（表现层）、交互规范（框架层、结构层）
● 视觉主要在「表现层」「框架层」进行规范统一，主要包括：图形、色彩、字体、界面布局、投影。
● 交互部分针对产品的「结构层」「框架层」入手定义统一的规范，指导页面、 流程搭建和组件使用规则，主要包括：全局原则、页面布局、标准组件、文案规范。
原则
好的设计,应该能让用户有效的完成特定任务,正确和完整的达到特定目标，所以应具备合乎伦理、目标明确、实用、优雅等特点。
然而设计不是凭空猜测，设计领域有很多经过了时间的验证的法则，被认作了设计原则，除了指导设计，它也是进行设计评估的依据。
除非有更好的选择，否则就遵从标准----交互设计之父 Alan . Cooper
保持一致性
● 与现实一致：与现实的物理逻辑一致，遵循用户习惯的语言和概念
● 与界面一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
少即是多 ● Less is more：多余的信息不仅让新手感到困惑，也会减慢熟练用户的操作速度。“少即是多'这条规则不仅适用于屏幕上的信息，也适用于程序中的功能选项和交互机制。在界面设计过程中体现三个方面： 减轻视觉干扰、精简文字表述、操作简单
别让用户思考 ● 遵从习惯：尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。比如填完表单，下一步应该生成表单，而不是下一步就是完成。
让界面处于用户的掌控中 ● 用户决策：根据场景给予用户操作建议或正确的提示 ● 结果可控：用户可自由的操作，包括撤销、终止当前操作等。
及时有效的反馈 ● 控制反馈：通过界面设计和交互动效让用户清晰感知的操作思路 ● 界面反馈：用户操作后，通过界面设计元素的变化，清晰展示了当前的操作状态
调研
针对新前端规范的修改，主要涉及以下三个方面：
1. 全局通用样式的修改，如标题的样式等
目前各项目前端代码都有通用样式的文件及使用方式，后续参与的人员如果不知道可以一起沟通、探讨
方案：
- 新增全局样式的文件，将各种通用样式分别对应语义化的类. 新增全局样式的文件，将各种通用样式分别对应语义化的类名
- 全局引用，注意引用样式的优先级
- 在画页面的时候，只需要添加对应的类名，不需要单独在页面中写样式，定制的除外
- 排查现有项目中所有页面，如果有定制的样式需要单独修改
2. antd组件样式
思路： antd定制主题 + less
实现：
1. 定义好新的样式文件夹，文件夹中定义入口文件（用于引用该文件样式）
2. 定义一份全局样式的变量，主要用于皮肤等修改
3. 定义一份所有组件定制样式的变量，主要用于各个组件定制的样式变量
4. 对比antd依赖包中各组件的样式（需要去看antd源码），抽取要定制的组件的类名
5. 在新文件中创建各个组件对应的文件，每个文件中都调用c步骤中的变量来设置样式，按需引入b步骤的全局样式
调研：
结果：思路可实现，本地验证了按钮Button的定制样式
问题：以button样式修改为例
1. antd组件和yun.design对比不明确，有很多需要反复确认的问题，比如：按钮样式中未明确置灰按钮的样式，按钮给出的多个样式中有两种对应的是antd组件中的一种，无边框无背景的按钮实际效果与链接link一致等
2. antd源码比较复杂，文件嵌套比较多，去抽取类名需要话不少时间，并且抽取之后还要注意其他样式的影响，所以就不仅仅是找类名的问题，还需要去看文件中对应调用的所有样式文件
3. 考虑到样式修改是否完全，需要本地调用，测试组件的各种情况
4. 对比yun.design的样式，并且定义语义化的类名，然后在定制的组件样式文件中准确调用
备注：
1. 此方案可将定制的样式文件夹上传到git管理，项目修改直接下载文件夹，按照调用方式即可修改
2. 方案不影响调用方式，改动量很少
3. 此方案可应用到单独项目，也可应用到微前端架构
4. 可在管理端定制页面，展示修改后的所有组件样式（样式修改后2-3天即可完成）
5. 后续有时间可以antd依赖包为基础，直接在依赖包中修改，发表私服后，可实现公司定制UI组件
使用：
范围：
全局antd组件
步骤：
antd样式框架搭建（全局引用 + antd提供皮肤定制的变量 + yun.design基础变量定义 + 所有定制组件样式文件） ==> 所有定制组件样式修改 ==> 针对定制样式抽取公共样式变量 ==> 所有整改组件预览页面
使用：
文件拷贝 => 全局引用 => 查漏补缺（问题收集汇总）=> 有定制的，或者其他样式影响的各项目排查修改
最终结果：
请参考 定制文件
请参考 项目集成
如何引用新前端规范公共文件？
1.本地已有主项目代码
vscode打开项目，打开终端，在根目录下：输入
git submodule add git仓库地址
这时，你会看到主仓库src目录下多了一个文件夹。
如果你是旧版 Git 的话，你会发现 ./src/新的文件夹 目录中是空的，你还需要在执行一步「更新子模块」，才可以把远程仓库项目中的内容下载下来:
git submodule update --init --recursive
添加子模块后，运行 git status，可以看到主仓库目录中会增加一个文件 .gitmodules，这个文件用来保存子模块的信息。
另外，在 .git/config 中会多出一块关于子模块信息的内容，
新生成的还有相关子模块的文件：.git/modules/新的文件夹/
至此：模块已在本地添加成功
然后将模块的内容提交到主项目仓库
然后在内网gitLab上提交的文件夹，图标会有些不同。
完成以上步骤，模块就已添加成功。
2.首次git clone带有yun_design模块的代码
需要加上–recursive表示clone主项目下面的子模块，加上-b 分支名 如
git clone --recursive -b develop git@github.com:Gguoxiang/hello-world.git
否则，src/yun_design文件夹下为空
修改点罗列
1.下载文件
规范文件单独建立git仓库，在各项目目录下通过git submodule拉取文件，为实现规范统一，各项目可拉取代码，不可提交
文件内容：
antd组件定制样式
全局样式变量
svg icon图标集合，与iconfont网站命名统一（注意：必须以icon-形式命名）
全新云问icon组件yIcon
PingFang和Helvetica的字体
2.使用
如上图：在main.js中添加
1--引入样式如何文件，注意：引入样式的位置确保在所有引入样式的最下面（样式优先级更高）
2–全局引入svg icon组件，并注册
3.–获取所有提供的svg图标文件
如上图：在webpack中配置
1–在原有配置的使用的svg中，过滤掉新增的svg图标
2–新增配置，配置新icon组件中使用的svg图标
3--特别注意，如果所有的svg图标都是以icon-开头命名的，那就用“[name]”，如果所有svg图标都没有以icon-开头命名，则用“icon-[name]”
如上图：在webpack中配置
在配置vue文件中，加入如上图的配置，确保在vue文件中可使用新规范提供的所有样式变量
规范整改FAQ
1.本地编译OK,打包报错，找不到main.js中引用的文件
答：项目在改造前端规范之后，jenkins编译打包需要运维修改jenkins配置！！！
原理：jenkins编译打包是跟我们本地操作一致，先git clone一份代码，然后运行npm run build 添加了submodule子模块的项目，如果直接git clone，那子模块只有文件夹，里面的内容clone不下来，所以需要运维修改配置。
2.icon组件引用的图标不显示，或者显示不正确？
答：a. 组件的配置参照要求是否都配置正确
b. 引用的type传值是否正确，svg图标库中是否存在对应的图标名称
c. 引用的图标是否是单色，如果是多色图标，需要传参self
