element-ui源码阅读-开篇

最近没那么忙，准备研究下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;

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

© 著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务

喜欢的朋友记得点赞、收藏、关注哦！！！