学习笔记《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 了

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

推荐阅读更多精彩内容

  • 本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai)原文链接 h...
    JinkeyAI阅读 425,752评论 152 921
  • 你是否有过这样的经历:感觉自己学了很多东西,却没法应用到生活中?我有。 你的执行力真的很差吗? 从今年三月到现在,...
    七十七号阅读 826评论 1 10
  • 今天是夕夕结婚十周年的纪念日!夕夕想了好几天给老公送什么,手表,手机,衣服,鞋子?老公说:手表没用,手机还能用,衣...
    第六子阅读 465评论 0 0
  • 1.做好充足的准备,向人请教问题,包括去拜访客户,拜访名人。自己准备的不充分,一问三不知,别人也不愿跟你多聊。 2...
    Sherry001阅读 256评论 0 0
  • 院中的牡丹孤稀的开着,很少见到阳光,四面房屋堵当,但这墩牡丹却顽强的生长,竟然还开了几朵花来,不得不感叹他...
    开心果_c632阅读 208评论 0 0