NoahV——百度基于Vue的高效智能运维前端框架

官网介绍

NoahV是一个基于vue开发的前端应用框架,主要适用于常见的后台管理系统,官网地址:

特性:

  • 上手简单,提供常用的各类组件,快速开始前端开发
  • 导航栏、页面布局JSON配置,无需代码逻辑开发
  • API数据模拟和API数据代理,让前后端不再耦合,联调更简单,效率更高
  • 数据仪表盘功能,满足常见的数据可视化需求,助力数据分析场景
  • 内置模版,只需简单配置就可以开发出想要的页面,非前端同学也能快速上手开发
  • 实用的脚手架功能,项目初始化、模板复用、模拟数据创建、调试server启动、框架升级一行命令通通搞定




NoahV——百度基于Vue的高效智能运维前端框架



开源首页

https://github.com/baidu/NoahV

系统架构

NoahV框架由五大部分组成,分别是:

  1. 底层框架:采用上手简单易用的Vuejs
  2. 组件模板库:主要有运维业务组件【服务树、趋势图、仪表图、数据面板、运维流程、运维表格、运维表单等】和运维场景组件【仪表盘】
  3. 代码质量/规范:主要有API规范、开发规范、UI规范等,另外内置单测工具,自动生成各个页面的单测模板,单测的覆盖率、代码覆盖与否一目了然。
  4. 功能特性:主要包括导航和页面布局JSON配置、主题定制、访问统计以及可以简化前后端联调过程的本地数据模拟和API数据代理功能
  5. 命令行工具:提供实用的脚手架功能

业务组件一览

  • 图标

图标名称参考font awesome命名习惯

NoahV——百度基于Vue的高效智能运维前端框架

树控件,支持层级结构关系展示、展开收起等交互功能。

  1. 支持节点选择功能
  2. 支持多节点选择功能
  3. 支持节点勾选功能
  4. 支持节点拖动功能
  5. 支持节点搜索功能
  6. 支持节点编辑功能
  7. 支持节点异步加载功能
  8. 支持节点添加和删除功能
  9. 支持节点展开的手风琴效果
  10. 支持选择、勾选和展开收起事件监听


NoahV——百度基于Vue的高效智能运维前端框架

  • 日历组件

日期选择控件,支持选择时间段和快捷键设置

  1. 支持选择日期和时间段
  2. 支持设置日期显示格式
  3. 支持设置快捷面板功能
  4. 支持设置不可选日期
  5. 支持设置日期和获取日期
  6. 支持监听选择日期变化
  7. 支持日期默认选中功能
  8. 支持日期显示干预功能
  9. 支持快捷面板默认选中功能
  10. 支持快捷面板反向高亮功能
  11. 支持日期v-model双向绑定

NoahV——百度基于Vue的高效智能运维前端框架

  • 步骤组件


NoahV——百度基于Vue的高效智能运维前端框架

  • 标签组件


NoahV——百度基于Vue的高效智能运维前端框架

  • 条件搜索框


NoahV——百度基于Vue的高效智能运维前端框架

  • 流程组件

流程控件,支持配置事务流程,增删节点等

  1. 支持配置流程
  2. 支持流程中增删节点
  3. 支持通过插槽自定义卡片内容

NoahV——百度基于Vue的高效智能运维前端框架

  • 穿梭框

穿梭框控件,支持通过移动条目表征选择逻辑等

  1. 支持简单移动选择场景
  2. 支持分组移动选择场景

NoahV——百度基于Vue的高效智能运维前端框架

  • 值班表

值班表日历组件,支持配置多值班人员,多周期配置


NoahV——百度基于Vue的高效智能运维前端框架

  • 省略组件


NoahV——百度基于Vue的高效智能运维前端框架

  • 列表组件


NoahV——百度基于Vue的高效智能运维前端框架

  • 图表组件


NoahV——百度基于Vue的高效智能运维前端框架

  • 趋势图


NoahV——百度基于Vue的高效智能运维前端框架

  • 表单模板


NoahV——百度基于Vue的高效智能运维前端框架


以上只是介绍了部分业务组件,还有更多可以直接参考官方网站

快速开始

NoahV框架依赖Nodejs 6.0,在执行如下步骤之前,请确保已经安装 Node.js v6.0 或以上。

1.安装脚手架工具

# 安装noahv-cli
$ npm install noahv-cli -g

# 查看使用帮助
$ noahv --help

2.初始化一个项目

# 创建一个空目录,进入目录中,运行noahv init 命令创建一个通用项目
$ mkdir project && cd project && noahv init

# 运行noahv init --dashboard 命令创建一个包含仪表盘功能的项目
$ mkdir project && cd project && noahv init --dashboard

3.运行项目

# 在项目根目录启动调试server
$ noahv start

4.复用模板

# 在项目根目录复用模板创建页面
$ noahv create

# 根据提示选择需要创建的页面类型,目前支持form、list、filterList、chart四种模板类型

总结

总体上来看,NoahV是一个非常不错的前端框架,而且是基于Vue的,现在很多的前端团队都使用Vue来作为前端开发框架,马上Vue3.0也要来了,学起来!

您可能还会对下面的文章感兴趣: