element-ui框架分析

项目结构目录

├─build // 构建相关的脚本和配置
├─examples // 用于展示Element组件的demo
├─lib // 构建后生成的文件，发布到npm包
├─packages // 组件代码
├─src // 引入组件的入口文件
├─test // 测试代码
├─Makefile // 构建文件
├─components.json // 组件列表，显示每个组件的入口和名称
└─package.json

package.json作用

查看一个项目，最开始应该从package.json文件入手，该文件包含了入口文件main、脚本scripts、版本version等信息。

main项目入口文件

在使用element-ui时，import Element from ‘element-ui’ 就是从入口文件进行导入。
而element-ui的入口文件

"main": "lib/element-ui.common.js"

lib/element-ui.common.js是 commonjs规范，也就是node中使用的规范
另外lib/index.js是umd规范。

files指定发布包的文件

把一个包发布到npmjs中，不能把所有的源代码都进行发布，否则下载包时会非常大非常耗时。
element-ui指定了files的内容，可以查看npm i element-ui 下载的包，只包含了这些目录。

"files": [
    "lib",
    "src",
    "packages",
    "types"
 ],

typings

Typescripts入口文件

unpkg

把包发布到npm，同时应该可以在unpkg中获取，这样代码就能在node环境和浏览器环境中运行。
因此发布一个包时，umd打包是必须的。由webpack.conf.js生成，lib/index.js就是umd规范。

style

样式的入口文件。

scripts执行不同功能的脚本

components.json文件

记录了组件名和组件的路径，在自动化生成文件以及入口时会使用。

  "pagination": "./packages/pagination/index.js",
  "dialog": "./packages/dialog/index.js",
  "autocomplete": "./packages/autocomplete/index.js",
  // ...
  "avatar": "./packages/avatar/index.js",
  "drawer": "./packages/drawer/index.js",
  "popconfirm": "./packages/popconfirm/index.js"
}

packages存放组件目录

存放着组件库的源码和组件样式文件。

packages文件夹是分开去处理每个组件。

以alert和row为例进行查看。alert组件使用了template模板语法，row使用了render语法。

alert组件

目录结构
index.js入口文件进行组件的注册。

import Alert from './src/main';
/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};
export default Alert;

引入组件，并提供了install方法，让Vue实例可以通过Vue.use(Alert);进行单组件引入

关于install可以看官方文档

row组件

可以看出来src/row.js使用的js文件，不是用vue结尾。该组件的语法和Alert有些不同，但是Alert的template写法最终还是会被编译为render结构。
查看下row.js文件

export default {
  name: 'ElRow',
  componentName: 'ElRow',
  // ....
  render(h) {
    return h(this.tag, {
      class: [
        'el-row',
        this.justify !== 'start' ? `is-justify-${this.justify}` : '',
        this.align ? `is-align-${this.align}` : '',
        { 'el-row--flex': this.type === 'flex' }
      ],
      style: this.style
    }, this.$slots.default);
  }
};

packages/theme-chalk

存放所有组件的相关样式，src存放的是scss文件，lib是css文件。
index.scss是全局引入库时使用的入口，其它每个scss文件对应按需引入组件时使用的文件。

src

该目标把所有组件做了一个统一处理，包含自定义指令、项目整体入口、组件国际化、组件 mixins、动画的封装和公共方法。

构建流程梳理

elementui 架构分析
element UI源码分析
组件库开发：