百度开源基于vue.js的高效前端应用程序框架——NoahV（前端开源vue项目）
官网介绍
NoahV是一个基于vue开发的前端应用框架，主要适用于常见的后台管理系统，官网地址：
特性：
- 上手简单，提供常用的各类组件，快速开始前端开发
- 导航栏、页面布局JSON配置，无需代码逻辑开发
- API数据模拟和API数据代理，让前后端不再耦合，联调更简单，效率更高
- 数据仪表盘功能，满足常见的数据可视化需求，助力数据分析场景
- 内置模版，只需简单配置就可以开发出想要的页面，非前端同学也能快速上手开发
- 实用的脚手架功能，项目初始化、模板复用、模拟数据创建、调试server启动、框架升级一行命令通通搞定
开源首页
https://github.com/baidu/NoahV
系统架构
NoahV框架由五大部分组成，分别是：
- 底层框架：采用上手简单易用的Vuejs
- 组件模板库：主要有运维业务组件【服务树、趋势图、仪表图、数据面板、运维流程、运维表格、运维表单等】和运维场景组件【仪表盘】
- 代码质量/规范：主要有API规范、开发规范、UI规范等，另外内置单测工具，自动生成各个页面的单测模板，单测的覆盖率、代码覆盖与否一目了然。
- 功能特性：主要包括导航和页面布局JSON配置、主题定制、访问统计以及可以简化前后端联调过程的本地数据模拟和API数据代理功能
- 命令行工具：提供实用的脚手架功能
业务组件一览
- 图标
图标名称参考font awesome命名习惯
- 树
树控件，支持层级结构关系展示、展开收起等交互功能。
- 支持节点选择功能
- 支持多节点选择功能
- 支持节点勾选功能
- 支持节点拖动功能
- 支持节点搜索功能
- 支持节点编辑功能
- 支持节点异步加载功能
- 支持节点添加和删除功能
- 支持节点展开的手风琴效果
- 支持选择、勾选和展开收起事件监听
- 日历组件
日期选择控件，支持选择时间段和快捷键设置
- 支持选择日期和时间段
- 支持设置日期显示格式
- 支持设置快捷面板功能
- 支持设置不可选日期
- 支持设置日期和获取日期
- 支持监听选择日期变化
- 支持日期默认选中功能
- 支持日期显示干预功能
- 支持快捷面板默认选中功能
- 支持快捷面板反向高亮功能
- 支持日期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也要来了，学起来！
