Saber 学习总结

简介

Saber 是 SpringBlade 前端 UI 框架,主要选型技术为 Vue、Vuex、Avue、Element UI,项目基于 Vue CLI 构建。

Saber 在线演示地址

搭建环境

参考 Saber开发手册Saber 基础 搭建前后端环境,后端项目 SpringBlade 是 SpringCloud 微服务架构,搭建比较复杂,可使用 SpringBlade boot 版,目前测试代码生成的功能只有在 boot 版才能跑通

Saber 项目地址

SpringBlade 项目地址

SpringBlade boot 项目地址

集成代码校验

参考 Saber 项目集成代码检查,集成拼写检查、JavaScript 代码检查、CSS 代码检查、代码风格检查以及使用 Git Hook 工具进行提交前代码规范校验。

基础学习

对照 Saber开发手册进行练习,除项目发布外所有练习都可完成。

Avue 官网学习

Avue 是基于现有 Element UI 组件库进行的二次封装,组件库主要针对 table 表格和 form 表单场景,且有在线表单设计器和表格设计器生成代码,还有一些企业常用的组件,是一个更贴近企业级的前端开发组件库,让开发变的更容易。

对照官网进行练习时,可先将 Saber 中 Avue 的版本升级到最新版本后再进行,避免由于版本问题一些 demo 运行报错。

Avue.js 官网地址

Avue表单设计器

Avue表格设计器

Avue-cli 学习

avue-cli 是一款基于 avue 和 element-ui 完全开源、免费的企业后端产品前端集成解决方案,已经准备好了大部分的项目准备工作,可以快速进行二次开发。

avue-cli 在线演示地址

avue-cli 项目地址

avue-cli后台模板框架讲解

源码学习

参考 avue-cli后台模板框架讲解Saber 源码学习 学习 Saber 源码。

集成 PWA

参考Saber 集成 PWA