官網介紹
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也要來了，學起來！
分享到:
閱讀更多 最美分享Coder 的文章
