element-ui 源码解析(一)框架分析

学习element-UI 笔记

阅读源码随手写点笔记。

项目目录结构

下载好 element-UI 后，我们需要读根目录下的 src 文件夹，这个是项目的主目录；以及根目录下的 packages 文件夹,这个是放没有压缩的源码文件。

1. /src/index.js

这个文件是项目的主入口，主要是引入所有的组件，全局注册，并模块导出。其中，申明了一个 install 函数，此函数是循环所有的组件并安装。如果我们需要用所有的组件的话，只需要导出 install 函数就可以。

const install = function(Vue, opts = {}) {
  locale.use(opts.locale); // 多语言
  locale.i18n(opts.i18n);

  components.forEach(component => { // 循环所有的组件并注册
    Vue.component(component.name, component);
  });

  Vue.use(InfiniteScroll);  // 无限滚动
  Vue.use(Loading.directive); // 全局 v-loading

  Vue.prototype.$ELEMENT = {    // 初始化配置项
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service; // 绑定属性事件在 vue 上
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

2. /package/module-name

这些是用来放组件的 vue 文件

3. /package/theme-chalk

这个文件夹是用来放组件的样式文件，这个文件夹我们只需要看 src 目录就可以

4. /package/theme-chalk/src/index.scss

这个文件是用来引入所有的样式布局，是样式文件的入口。其中需要注意的文件有：

框架大体就理清楚了，下面我们就要开始学习第一个组件 el-button