百度开源基于vue.js的高效前端应用程序框架——NoahV

官网介绍

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

特性：

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

<hr/>

<hr/>
开源首页

https://github.com/baidu/NoahV
系统架构

NoahV框架由五大部分组成，分别是：

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

业务组件一览

图标

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

树

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

支持节点选择功能支持多节点选择功能支持节点勾选功能支持节点拖X能支持节点搜索功能支持节点编辑功能支持节点异步加载功能支持节点添加和删除功能支持节点展开的手风琴效果支持选择、勾选和展开收起事件监听

日历组件

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

支持选择日期和时间段支持设置日期显示格式支持设置快捷面板功能支持设置不可选日期支持设置日期和获取日期支持监听选择日期变化支持日期默认选中功能支持日期显示干预功能支持快捷面板默认选中功能支持快捷面板反向高亮功能支持日期v-model双向绑定

步骤组件

标签组件

条件搜索框

流程组件

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

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

穿梭框

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

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

值班表

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

省略组件

列表组件

图表组件

趋势图

表单模板

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


快速开始

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也要来了，学起来！