elementUi源码解析(1)--项目结构篇
因为在忙其他事情好久没有更新iview的源码,也是因为后面的一些组件有点复杂在考虑用什么方式把复杂的功能逻辑简单的展示出来,还没想到方法,突然想到element的组件基本也差不多,内部功能的逻辑也差不多,就一起来看源码,element用的css预处理器是sass。
项目结构
build
:放置webpack的配置文件。examples
:放置element api的页面文档。packages
:放置element的组件(css样式放置在这个目录下theme-chalk
下)。src/directives
:放置自定义指令。src/locale
:放置语言的配置文件。src/mixins
:放置组件用的混合文件。src/transitions
:放置动画配置文件。src/utils
:放置用到工具函数文件。src/index.js
:组件注册的入口文件。test
:测试文件。types
:这个文件里放了typescript的数据类,还没找到哪里用了这里的类,欢迎大神留言指点
个人还是比较喜欢iview的项目结构(iview源码解析(1)),感觉更清晰一点,项目结构的目的还是有序的管理代码,根据团队实际习惯选择哪种结构。index.js的组件注册和iview的差不多,这里就不重复了。
样式
element的样式用的是sass,而且在class的命名上和iview有点差别。
element的样式:
@include when(disabled) {.el-input__inner {background-color: $--input-disabled-fill;border-color: $--input-disabled-border;color: $--input-disabled-color;cursor: not-allowed;&::placeholder {color: $--input-disabled-placeholder-color;}}.el-input__icon {cursor: not-allowed;}}
在看下最后编译的class命名:
.el-input--medium .el-input__inner {height: 36px;line-height: 36px;
}
.el-input--suffix .el-input__inner {padding-right: 30px;
}
可以看出命名规则是BEM 命名规范(了解更多)B(代表块)__E(代表元素)--M(代表修饰符)
iview的样式代码:
// prefix & suffix&-prefix, &-suffix{width: 32px;height: 100%;text-align: center;position: absolute;left: 0;top: 0;z-index: 1;i{font-size: 16px;line-height: @input-height-base;color: @subsidiary-color;}}&-suffix{left: auto;right: 0;}&-wrapper-small &-prefix, &-wrapper-small &-suffix{i{font-size: 14px;line-height: @input-height-small;}}
命名也带有B、E、M的意思但中间是-
分开。
凑点文字篇幅,把Ant Design of React的项目结构也奉上把。
components
:放置组件文件(文档、样式都放在这里面)。components/demo
:组件的api文档。components/tyle
:组件的样式文件。components/index.tsx
:组件的入口文件。docs
:Ant Design of React相关文档。scripts
:打包的配置文件。site
:公共文件,包括样式,js,语言配置文件。tests
:测试文件。
Ant Design of React的样式的命名规则和iview差不多也是用less,就不多说了。
转载于:https://www.cnblogs.com/hetaojs/p/9408041.html
elementUi源码解析(1)--项目结构篇相关推荐
- h2o.ai源码解析(1)—项目简介
h2o.ai项目简介 参考h2o.ai官网中给出的项目定位是"open source platform for AI".相较于当前市面上的机器学习平台,h2o.ai的优势在于: - ...
- pomelo源码解析--新建项目(cli工具: pomelo)
pomelo怎么新建项目 官方文档 1. 安装pomelo 2. 新建项目HelloWorld 我简单整理了下创建新项目关键步骤: 安装pomelo 方式一: $ npm install pomelo ...
- .NET Core实战项目之CMS 第三章 入门篇-源码解析配置文件及依赖注入
写在前面 上篇文章我给大家讲解了ASP.NET Core的概念及为什么使用它,接着带着你一步一步的配置了.NET Core的开发环境并创建了一个ASP.NET Core的mvc项目,同时又通过一个实战 ...
- elementui组件_elementui 中 loading 组件源码解析(续)
上一篇我们说了elementui如何将loading组件添加到 Vue 实例上,具体内容见上期 elementui 中 loading 组件源码解析. 这一篇我们开始讲讲自定义指令 自定义指令 关于自 ...
- elementui table某一列是否显示_elementui 中 loading 组件源码解析(续)
上一篇我们说了elementui如何将loading组件添加到 Vue 实例上,具体内容见上期 elementui 中 loading 组件源码解析. 这一篇我们开始讲讲自定义指令 自定义指令 关于自 ...
- 美团动态线程池实践思路开源项目(DynamicTp),线程池源码解析及通知告警篇
大家好,这篇文章我们来聊下动态线程池开源项目(DynamicTp)的通知告警模块.目前项目提供以下通知告警功能,每一个通知项都可以独立配置是否开启.告警阈值.告警间隔时间.平台等,具体代码请看core ...
- Android Hawk数据库的源码解析,Github开源项目,基于SharedPreferences的的存储框架
今天看了朋友一个项目用到了Hawk,然后写了这边文章 一.了解一下概念 Android Hawk数据库github开源项目 Hawk是一个非常便捷的数据库.操作数据库只需一行代码,能存任何数据类型. ...
- 轻触开源(三)-Gson项目源码解析_贰
2019独角兽企业重金招聘Python工程师标准>>> 转载请注明出处:https://my.oschina.net/u/874727/blog/750473 Q:102525062 ...
- 【开源项目】动态线程池框架Hippo4j源码解析
动态线程池框架Hippo4j源码解析 项目简介 Hippo-4J 通过对 JDK 线程池增强,以及扩展三方框架底层线程池等功能,为业务系统提高线上运行保障能力. 快速开始 https://hippo4 ...
最新文章
- 2021年大数据HBase(十五):HBase的Bulk Load批量加载操作
- 定时调度模块:sched
- html邮件链接和锚点链接
- ffmpeg源码分析:transcode_init()函数
- $.ajax返回的JSON格式的数据后无法执行success的解决方法
- WebStorm Vue ElementUI
- mysql中间件面试题_面试题集锦-中间件 - 春哥大魔王的博客的个人空间 - OSCHINA - 中文开源技术交流社区...
- [树状数组][哈希]JZOJ 3240 Seat
- CentOS 7 上安装 MySQL5.7
- Class.isAssignableFrom instanceof 区别
- MOSFET知识小结
- iOS开发之NSLocalizedString,多个本地化语言(Xcode9.2)
- 为什么梯度反方向是函数值下降最快的方向?
- [调研] 人脸/车牌脱敏 调研
- 产品周报第29期|创作中心优化:发文助手新增质量分检测功能,博文增加内容历史版本
- 有效说服三部曲(纯干货无废话)
- 四贝夺嫡争代言 骆驼营销背后内幕
- 谷歌涂鸦(goofle doodle)
- 广东省第三届强网杯Writeup
- 如何建立自己的微信小程序,做一个微信小程序大概多少钱?