框架介绍
没错,我们又搭了一套前端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