Element-UI源码之目录结构
克隆代码
git clone https://github.com/ElemeFE/element.git
慢慢等吧,看运气了
从最新的发布分支上切一个分支出来
git tag
看到所有的发布之后的分支打的tag,v2.13.0是最新的
git checkout v2.13.0
git checkout -b reading
目录结构overview
- build项目构建命令的目录
- examples文档目录
- packages各个组件的源码目录
- src源码目录
- test测试目录
- types typescript定义的类型的目录
- .babelrc babel的配置
- .eslintignore eslint忽略的配置
- .eslintrc eslint的配置文件
- .travis.yml 持续集成的配置文件
- components.json 全部组建的列表
- package.json
看一个node项目最好的入口当然是package.json中的scripts了,首先看看package.json吧
package.json
下面是scripts节的内容
"bootstrap": "yarn || npm i", // 拿到项目源码第一步安装项目依赖包"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js","build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk","build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js","build:umd": "node build/bin/build-locale.js","clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage","deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME","deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js","dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js","dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js","dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js","dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme","i18n": "node build/bin/i18n.js","lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet", // 没啥好说的"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh","test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run","test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
build:file
看下它的命令
"node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js"
都在build/bin目录下
node build/bin/iconInit.js
从packages/theme-chalk/src/icon.scss文件中提取字体图标的类名到examples/icon.json中
node build/bin/build-entry.js
根据components.json中组件的列表,结合字符串模板生成src/index.js,这是组件库的入口文件
node build/bin/i18n.js
为examples/pages中的模板文件生成不同语言的vue文件到examples/pages/[语言]/
node build/bin/version.js
生成版本字符串数组到examples/version.json中,文档会使用
现在总结一下build:file的作用
- 根据packages/theme-chalk/src/icon.scss生成examples/icon.json
- 根据components.json生成src/index.js
- 根据examples/i18n/page.json生成不同语言的文档框架组件
- 生成examples/version.json
除了第二个其他都是为了文档做准备的。
build:theme
"node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk"
node build/bin/gen-cssfile
生成样式文件的入口文件index.scss,在packages/theme-chalk/src/index.scss
支持添加新的主题,添加主题的工作量不小的,需要为每个组件都提供一个新的样式文件,参照packages/theme-chalk
gulp build --gulpfile packages/theme-chalk/gulpfile.js
编译scss
cp-cli packages/theme-chalk/lib lib/theme-chalk
把编译好的样式文件拷贝到lib/theme-chalkk里面
总结一下build:theme,从名字上就能看出来这个是跟样式相关的命令,把scss文件编程css文件,并做相应的拷贝工作。
build:utils
"cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js"
cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js
build:umd
"node build/bin/build-locale.js"
node build/bin/build-locale.js
把ES6的模块定义转换成umd的模块定义,输出到lib/umd/locale中
clean
"rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage"
rimraf lib
rimraf packages/*/lib
rimraf test/**/coverage
deploy:build
"npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME"
webpack --config build/webpack.demo.js
就是一个标准的webpack配置文件。这个其实是文档构建的webpack配置,非得加个demo,让人摸不着头脑!!
入口文件是examples/entry.js
输出目录是examples/element-ui
有一点要说一下,就是组件的文档使用md写的,需要先把md文件转换成vue文件,项目自己写了一个md的loader,厉害了
{test: /\.md$/,use: [{loader: 'vue-loader',options: {compilerOptions: {preserveWhitespace: false}}},{loader: path.resolve(__dirname, './md-loader/index.js')}]}
所有逻辑都做在了md-loader/index.js里面了,要完全搞明白代码有点复杂,先放一下。
echo element.eleme.io>>examples/element-ui/CNAME 不知道想干啥
总结一下,这个命令是构建文档的。
deploy:extension
"cross-env NODE_ENV=production webpack --config build/webpack.extension.js"
webpack --config build/webpack.extension.js
编译出一个chrome扩展插件,可以在浏览器中直接改element组件的颜色,挺有意思。
不过在执行这个命令的时候总报错,我没有解决它,只是把cross-env NODE_ENV=production干掉了
dev:extension
"rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js"
参考deploy:extension
dev
"npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js"
dev:play
"npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js"
dist
"npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme"
i18n
"node build/bin/i18n.js"
参考build:file
lint
"eslint src/**/* test/**/* packages/**/* build/**/* --quiet"
没啥好说的
pub
"npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh"
test
"npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"
用karma来做测试的
test:watch
"npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
到此package.json中的scripts基本过了一遍了。
怎么创建一个组件
- 编写组件的代码
- 为组件创建文档
- 为组件创建单元测试
编写组件
这里以一个hello-world组件为例。效果如下图,接收一个属性name,输出Hello, {{ name }}
1. 在packages下创建hello-world目录
2. 在hello-world中创建index.js和src/main.vue
```
// index.js
import HelloWorld from './src/main';
/* istanbul ignore next */
HelloWorld.install = function(Vue) {Vue.component(HelloWorld.name, HelloWorld);
};
export default HelloWorld;// src/main.vue
<template><div class="hello-world">Hello, <a href="#">{{ name }}</a></div>
</template>
<script>
export default {name: 'HelloWorld',props: ['name'],data() {return {};}
};
</script>
```
3. 在components.json中注册hello-world组件
```
"hello-world": "./packages/hello-world/index.js"
```
4. 在packages/theme/chalk/src下添加hello-world.scss```.hello-world {}```
添加文档
在examples/docs/zh-CN下添加hello-world.md
在nav.config.json中注册
添加测试
在test/unit下创建hello-world.spec.js
import { createTest } from '../util';
import HelloWorld from 'packages/hello-world';
describe.only('test HelloWorld', () => {const name = '岁月神偷';const vm = createTest(HelloWorld, {name}, true);it('there should be .hello-world', () => {expect(vm.$el.classList.contains('hello-world')).to.be.true;});it('should contains name', () => {expect(vm.$el.textContent).to.contains(name);});
});
npm run test:watch 运行
因为单元测试太多了,我们只想测试自己的组件,所以上面的测试我加了only,这样就只会跑这个测试了,等开发完组件,要把这个干掉的。
这里用的断言库好像是should.js,感兴趣的自己查查看。
有用请点赞哦,嘻嘻
Element-UI源码之目录结构相关推荐
- 从 Element UI 源码的构建流程看前端 UI 库设计
引言 由于业务需要,近期团队要搞一套自己的UI组件库,框架方面还是Vue.而业界已经有比较成熟的一些UI库了,比如ElementUI.AntDesign.Vant等. 结合框架Vue,我们选择在Ele ...
- EntLib.com Forum / YAF 开源论坛--源码的目录结构(对分析代码很有帮助)
EntLib.com Forum / YAF 开源论坛--源码的目录结构如下(对分析代码很有帮助): ├─bin (二进制目录,编译后的dll放于此处) ├─classes (类文件目录,如系统中用到 ...
- Linux源码的目录结构和Linux文件系统的目录结构
Linux源码的目录结构和Linux文件系统的目录结构 我是一个小白,最近找工作找到是一份驱动方面的工作,刚从学校毕业出来啥也不懂.个人觉得首先了解的就是一个工程的目录下的文件分别表示什么,所以看了别 ...
- Android【SDK目录结构】、【HelloWorld项目的目录结构】、【源码sources目录结构】
Android SDK 目录和作用的分析详解 1.add-ons这里面保存着附加库,比如GoogleMaps,当然你如果安装了OphoneSDK,这里也会有一些类库在里面. 2.docs这里面是And ...
- Android【SDK目录结构】、【HelloWorld项目的目录结构】、【源码sources目录结构】...
Android SDK 目录和作用的分析详解 1.add-ons这里面保存着附加库,比如GoogleMaps,当然你如果安装了OphoneSDK,这里也会有一些类库在里面. 2.docs这里面是And ...
- Android源码项目目录结构
src: 存放java代码 gen: 存放自动生成文件的. R.java 存放res文件夹下对应资源的id project.properties: 指定当前工程采用的开发工具包的版本 libs: 当前 ...
- 黄聪:wordpress源码解析-目录结构-文件调用关系(转)
Wordpress是一个单入口的文件,所有的前端处理都必须经过index.php,这是通过修改web服务器的rewrite规则来实现的.这种做法的好处是显而易见的,这样URL更好看,不必为每一个url ...
- QT中在设计师Design进行界面开发后查看ui源码
1.有时想在qt代码中实现某些功能,像我遇到的情况就是想在界面上实现添加一个水平的空白控件,也就是设计师里面的Horizontal Spacer控件,如图1 然后将其添加到布局里面,效果如图2 图1 ...
- android源码的目录
android源码的目录 \frameworks\base\core\java 下载了android源码,但是不知道java的源码目录,可以在\frameworks\base\core\java去看看
最新文章
- Java Coverage(Cobertura)工具
- 什么是 CAS 机制?
- 艾伟:详解AJAX核心 —— XMLHttpRequest 对象 (下)
- CVer入门必备:计算机视觉的深度学习实践
- 完美图解教程 Linux环境VNC服务安装、配置与使用
- python scratch unity_Unity3D研究院之2D游戏开发制作原理(二十一)
- C++结构体中const使用场景
- bootstrap-multiselect 手动触发onChange事件
- 支付宝生活号异步通知地址_异步生活。
- 树莓派zero+mysql_关于树莓派zero的系统安装配置部署
- eclipse安装Android模拟器genymotion及其插件
- 字节跳动社招面试记录,java异常处理关键字
- OpenCV和OpenGL的异同
- IDM最强大的多线程下载器 Internet Download Manager v2021 中文版+超多皮肤
- 【Android音视频开发】【007】SurfaceView实现H264播放器
- C语言lrc校验算法详解,C语言解析lrc文件
- 计算机桌面体验,如何安装win10的桌面体验功能?
- IT学生技术入门值得关注的网站(页)链接
- 使用信锐无线控制器对接营运商portal服务器的原理分析与排错
- Python求两个或三个正整数的最大公约数和最小公倍数