百度開源基於vue.js的高效前端應用程序框架——NoahV

官網介紹

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也要來了,學起來!