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

官网介绍

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

特性：

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

---

---

开源首页

https://github.com/baidu/NoahV

系统架构

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

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

业务组件一览

• 图标

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

• 树

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

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

• 日历组件

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

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

• 步骤组件

• 标签组件

• 条件搜索框

• 流程组件

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

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

• 穿梭框

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

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

• 值班表

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

• 省略组件

• 列表组件

• 图表组件

• 趋势图

• 表单模板

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

快速开始

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