学习笔记《Element》

项目的 webUI 选择了 Element 这个库，是 饿了么 官方做的，目前 12700 颗 star，算是比较有保障~

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源。

基本实现

Element 的实现原理，是基于 Vue 的组件机制，自定义了一系列的标签实现（有60多种），都是以 el- 开头，比如 el-tabs el-col el-inut 等等，然后 Vue 的组件机制会对这些标签进行替换，从而转换成为 HTML 元素

调试环境

在使用的时候，element 是直接调用的 lib/element-ui.common.js 这个文件，所以无法直接调试 element-ui 的代码，所以需要搭建一个本地的调试环境

直接下载 github 的文件，然后整体覆盖掉项目的 /node_module/element-ui/ 目录，运行：

npm install
npm i cooking-cli -g // Element 自己家的一个打包工具
npm run-script bootstrap
npm run-script dist

之后便会在项目的 /node_module/element-ui/lib 下面编译好所有的文件

debug 的话需要调用：

npm run dev

之后访问终端中显示出来的，形如 http://0.0.0.0:8085/ 这样的地址就可以进行 debug 了