最近没那么忙，准备研究下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目录下的组件引入进来进行注册，然后再导出。主要步骤如下所示：

• 1. 使用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;

开篇主要介绍到这里了，后面将分析一些比较复杂点的组件。