1、本着够用的原则，这个源码系列，先易后难（狗头，难的我也不会）。先不讲element build目录下工程化的配置，这些等用到的时候再说，先从组件源码，样式规范一点点铺展开来。先上车，后买票
2、既然是一个系列，争取做到详细，包括主要组件、重要函数、关键配置、测试脚本，以及编写对应开发文档。
3、虽然vue3已经逐步取代了vue2，新的UI框架也款款而来，但不妨碍elementUI依然作为我心中的最佳，每每阅读总有源源不断的知识点可以学习，经典永不过时
希望我能坚持下去
使用了elementUI也有两三年了，但好像从没有认真阅读过elementUI的官方文档，只是用到的时候翻一翻，源码更没有看过。机会来了，终于睡服领导，同意打造公司的组件库（其实又是一次大型的粘贴复制）。
领导本着凡事三板斧的原则，必要问个所以然。答案必然要备好，免得打脸。
1、为什么要打造自己的组件库？
答: 项目中，大量需要针对elementUI的样式进行二次修改，开发效率低。项目满眼的/deep/,满眼的泪
2、开发组件库有何收益？
答：通过开发组件库，实现相似产品线的整合，实现产品UI风格的统一
3、开发组件的人力投入如何？
答：分为两期，一期2人月，基本完成对原有组件的样式修改和文档补充；二期2人月，新增图形、复杂表格等组件
从github上下载elementUI的源码，我的版本是2.15.7
| 目录 | 内容 |
|---|---|
| build | 工程化相关配置和脚本（越到后越感叹element的工程化程度如此之高） |
| examples | 官方文档项目（没想到elementUI官方文档也在组件库中，厉害，原谅我这碗水太浅） |
| lib | 组件库打包后生成的文件（执行npm run dist即可生成） |
| packages | 组件库源码（各组件源码都在该目录，样式文件在theme-chalk中） |
| src | 封装的公共方法和指令 |
| test | 测试脚本 |
| types | 定义组件的类型 |
| 命令 | 作用 |
|---|---|
| dev | 启动组件库的本地开发环境，npm run dev，生成组件库的开发文档 |
| dev:play | 启动组件测试项目，npm run dev:play，用于验证开发的组件 |
| dist | 构建组件库, 生成lib文件，通过npm引入elementUI，就是使用lib中的内容 |
1、npm i 安装项目依赖
2、修改build/webpack.demo.js中的host路径，注释掉 // host: ‘0.0.0.0’
3、在 examples/play/index.vue 中引入组件库中的任意组件
4、执行npm run dev:play
5、浏览器打开 http://localhost:8085 就可以进入组件测试页面
1、自定义一套新的UI样式、多套主题颜色、支持一键换肤
2、自定义组件名称，将所有以el开头的组件，改成以ld开头,如按钮组件变为ld-button
3、新增复杂表格组件、图形组件、关系图谱组件等等
4、引入自己的图标库，图标库要支持彩色图标，同时兼容elementUI本身的图标
5、结合公司业务，修改多个组件的交互逻辑，如级联组件、下拉框组件、tree组件等等
6、……
1、打开packages/theme-chalk/src/common/var.scss
该文件定义组件库统一的色板与样式。各样式分类清晰，方便各组件统一引用，为后期的换肤打好基础。
2、修改各主题色：
$–color-primary、$–color-success、$–color-warning、$–color-danger、$–color-info
3、按照新的UI修改色板中的其他颜色，尽量先不要删除色板中变量，以免造成编译失败
4、非常好用Mix()函数
作用：
Mix函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。$color-1 和 $color-2 指的是需要合并的颜色，$weight 为合并的比例，默认值为 50%
语法如下：
mix($color-1,$color-2,$weight)
@debug mix(#f00, #00f, 25%) // #4f00bf
5、elementUI为何要使用Mix函数？
通过Mix函数，可以实现定义一套样式规则，实现了UI色板规则的统一
组件颜色有各种状态，比如hover、focus、active等
以primary主题色为例:
hover颜色：$–color-primary-hover: mix($–color-white, $–color-primary, 20%) --白色与主色混入
active颜色：$–color-primary-active: mix($–color-black, $–color-primary, 20%) --黑色与主色混入
这样success、warning、danger、info等主题色都可以按照这个混入规则生成对应状态的颜色yyds
将所有以el开头的组件，改成以ld开头
以button按钮组件为例,标签名变为ld-button
1、打开packages/button/src/button.vue
将template模板中，将class所有el开头的替换成ld，注意el-icon开头的class不要替换（这是element的图标名）。export default中 name: ‘ElButton’ → name: ‘LdButton’
2、打开packages/theme-chalk/src/button.scss
将所有以el开头的class类名替换成ld，同样el-icon开头的class不要替换
3、打开packages/theme-chalk/src/mixins/config.scss
将$namespace: ‘el’ 替换成 $namespace: ‘ld’
4、打开examples/play/index.vue
引入ld-button组件
<ld-button type="primary">默认按钮</ld-button>
5、npm run dev:play，打开http://localhost:8085 页面，即可看到新生成的ld-button按钮组件
到这里铁子们已初步了解elementUI源码架构和基本开发步骤。说不多说，开始着手打造自己的组件库吧。
下一篇将讲解 elementUI 源码系列二：BEM实现 Sass语法 Css编码规范 ，我们继续发车
如何快速为团队打造自己的组件库（上）—— Element 源码架构
如何快速为团队打造自己的组件库（下）—— 基于 element-ui 为团队打造自己的组件库
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
一、引擎主循环UE版本：4.27一、引擎主循环的位置：Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑：1、EnginePreInit：加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序：模块加载过程：（1）注册模块中定义的UObject，同时为每个类构造一个类默认对象（CDO，记录类的默认状态，作为模板用于子类实例创建）（2）调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类（UGame
基础版云数据库RDS的产品系列包括基础版、高可用版、集群版、三节点企业版，本文介绍基础版实例的相关信息。RDS基础版实例也称为单机版实例，只有单个数据库节点，计算与存储分离，性价比超高。说明RDS基础版实例只有一个数据库节点，没有备节点作为热备份，因此当该节点意外宕机或者执行重启实例、变更配置、版本升级等任务时，会出现较长时间的不可用。如果业务对数据库的可用性要求较高，不建议使用基础版实例，可选择其他系列（如高可用版），部分基础版实例也支持升级为高可用版。基础版与高可用版的对比拓扑图如下所示。优势 性能由于不提供备节点，主节点不会因为实时的数据库复制而产生额外的性能开销，因此基础版的性能相对于
已经有一个问题回答了如何将“America/Los_Angeles”转换为“PacificTime(US&Canada)”。但是我想将“美国/太平洋”和其他过时的时区转换为RailsTimeZone。我无法在图书馆中找到任何可以帮助我完成此任务的东西。 最佳答案 来自RailsActiveSupport::TimeZonedocs:TheversionofTZInfobundledwithActiveSupportonlyincludesthedefinitionsnecessarytosupportthezonesdefinedb
是否有self验证的问题列表。看着那个，我可以确定我知道。我应该复习一下。在学习的过程中，我列了一个这样的list，但它只包含我在某处听说过的项目。我需要一段时间才能找到新的东西。 最佳答案 以下是针对ruby和Rails的一些测试列表。证书名称:RubyonRails谁提供:oDeskIncorporation认证费用:免费网站:https://www.odesk.com/tests/985?pos=0证书名称:RubyonRails提供者:Techgig.com(TimesBusinessSolutionsLimited(T
我使用irb。下面是我写的代码。“斧头”..“bc”我期待"ax""ay""az""ba"bb""bc"但结果只是“斧头”..“bc”我该如何纠正？谢谢。 最佳答案 >puts("ax".."bc").to_aaxayazbabbbc 关于ruby-从结束值创建一系列字符串，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7617092/
1.回顾.TransportServicepublicclassTransportServiceextendsAbstractLifecycleComponentTransportService：方法：1publicfinalTextendsTransportResponse>voidsendRequest(finalTransport.Connectionconnection,finalStringaction,finalTransportRequestrequest,finalTransportRequestOptionsoptions,TransportResponseHandlerT>
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍 介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。 内容有： ①：Hub模型的方法介绍 ②：服务器端代码介绍 ③：前端vue3安装并调用后端方法 ④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on