最近没那么忙，准备研究下element-ui源码，借签一下大神的组件设计思路，来提升下组件开发的能力，将其运用到工作中，提升组件的可复用性和可维护性。通过源码来vue、css、组件设计等知识。首先从github上下载element-ui的源码，解压后目录如下所示：
// 源码开发包目录结构
element
├──.github // github的ISSUE等文件模板
├── build // webpack编译配置文件等
├── examples // 官方主页项目包
├── lib // 打包后文件目录
├── node_modules // 模块依赖目录
├── packages // 组件的源码目录
├── alert // 具体组件源码包
├── src // Vue组件包
├── index.js // 入口文件
├── src // 源码目录
├── directive // 实现滚轮优化，鼠标点击优化
├── locale // i18n国际化
├── mixins // Vue混合器
├── transition // 样式过渡效果
├── utils // 工具类包
├── index.js // 源码入口文件
├── test // 测试目录
├── unit // 单元测试目录
├── coverage // 单元测试覆盖率包
├── specs // 测试用例源码包
├── index.js // 测试入口
├── karma.conf.js // karma配置文件
├── utils.js // 工具类
├── types // typescript文件包
├── .babelrc // babel配置文件
├── .eslintignore // eslint配置忽略文件
├── .eslintrc // eslint配置
├── .gitignore // git忽略文件
├── .travis.yml // 持续构建配置
├── package.json // npm包核心文件
├── components.json // 组件列表json
├── yarm.lock // yram版本控制文件
├── package-lock.json // npm包版本控制文件
├── postcss.config.js // postcss配置文件
在阅读前端项目源码时，我有个习惯，首先看的就是package.json文件，在该文件中我一般主要关注入口文件，引用的第三方库，执行的脚本命令这三个点，然后再看代码。
1. package.json文件
1.1第三方库
这里主要介绍下dependencies下的源码，在开发的时候一般都会用到，element-ui主要引入了以下6个js库：
"async-validator": "~1.8.1", #异步数据验证插件
"babel-helper-vue-jsx-merge-props": "^2.0.0", #jsx和vue合并插件
"deepmerge": "^1.2.0", #对象深度合并插件
"normalize-wheel": "^1.0.1", #浏览器滚轮兼容插件
"resize-observer-polyfill": "^1.5.0", #监听元素变化插件
"throttle-debounce": "^1.0.1" #节流去抖插件
下面主要介绍下src目录packages目录。
2.src
2.1. index.js
index.js文件为入口文件，其主要作用是将packages目录下的组件引入进来进行注册，然后再导出。主要步骤如下所示：
- 使用
import引入所有组件。
- 使用
- 2.定义
components数组，将引入的组件都添加到数据中。 - 3.定义
install函数，在函数中主要包括以下几个步骤
- a.设置国际化
- b.遍历
components数组，对组件进行注册。- c.引用指令。
- d.将
loading，msgbox，alert，confirm，prompt，notify，message挂载到Vue上，这就是为什么我们可以在组件中可以直接通过this.$message等方式来调用的原因。
- 4.使用
export default导出，方便外部进行调用。
2.2.directives
directives文件夹下包括了鼠标滚动事件和重复点击事件两个指令。主要是用于优化这两个事件。
2.3.locale
locale文件夹主要跟国际化相关，存储一些国际化的文件，每一种语言一个配置文件。
2.4 mixins
mixins下包含一些常用的混合器。
2.5 transition
transition下包含一些样式过渡效果。
2.6 utils
utils下包含一些常用的工具方法。
3. packages目录
packages目录包括了所有的组件和主题样式theme-chalk。
3.1 theme-chalk
该文件夹主要是包括了所有组件的样式信息，如果要创建不同的主题，只需修改该文件夹下面的样式就可以了。element-ui使用的是scss，其代码都是基于scss来编写的，比较容易读懂。具体的样式定义，样式规则将在后面单独写一批文章来总结。
3.2 组件
每一个组件目录基本都是包括一个main.vue文件和一个index.js文件。
3.2.1 main.vue
用于创建组件，包括模板代码、样式代码和js代码。
3.2.2 index.js
该文件主要是用于注册组件，方便使用vue.use来引入，基本都是如下所示的代码。
import Alert from './src/main';
/* istanbul ignore next */
Alert.install = function(Vue) {
Vue.component(Alert.name, Alert);
};
export default Alert;
开篇主要介绍到这里了，后面将分析一些比较复杂点的组件。
