新年新UI,2022以新UI作为开局~

时间:2022-01-01 22:06   作者:ChenReal    阅读:161

框架介绍

没错,我们又搭了一套前端UI框架。换UI真的需要很大的勇气,特别是对于已经上线运营的老项目来说投入很大,收益甚微。架不住代码洁癖的召唤,加上对旧UI的“7年之痒”,终于下决心,换UI!把梁静茹给的勇气全部耗尽,终于折腾出一套感觉上比较满意的UI框架。

当然,我们并非要重新造轮子。因此搭建UI框架的还是之前熟悉的手法,先用一套已经成型的UI库来打底,用人家的组件库里的零件进行拼装组合,从而做出我们需要界面UI展现。

回看我们这一版本的用料,绝对算得上是站在了“巨人”的肩膀上!不再是用淘宝弃婴SUI和小厂作品名不见经传的ZUI这一类组件库,而是应用了大名鼎鼎如日中天的Vue3.x+ElementUI的加强版——ElementPlus,另外还有我所用过最顺手的JS Grid组件——GridManager。

Vue3

ElementPlus是基于Vue3.X版本开发的桌面端组件库。因此,想玩转本UI框架,首先要掌握Vue.JS 3.x(下面称Vue3)。包括:

  • 模版语法(https://v3.cn.vuejs.org/guide/template-syntax.html)
  • 组件封装机制 (https://v3.cn.vuejs.org/guide/component-basics.html)
  • 组件生命周期 (https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html)

Vue3对开发者耳炎如雷贯耳,不必多做介绍。虽然网上非常多关于Vue3资料资料,但首推当属官方文档。

官网地址:https://v3.cn.vuejs.org/guide/introduction.html

ElementPlus

ElementPlus是一套开箱即用的UI组件库,有了Vue3的基础,上手会很容易,并且有官网上的详细文档说明和示例。完全可以做一个快乐的代码搬运工了!

官网地址:https://element-plus.gitee.io/zh-CN/component/button.html

GridManager 表格组件

本UI框架的Table组件没有使用ElementPlus全家桶里的,而是用GridManager。 为什么?因为它更好用啊。理由就这么简单~

官网地址:https://gridmanager.lovejavascript.com/api/index.html

 

评论
0/200