项目的 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 了