官網(wǎng)介紹

NoahV是一個(gè)基于vue開發(fā)的前端應(yīng)用框架，主要適用于常見的后臺(tái)管理系統(tǒng)，官網(wǎng)地址：

特性：

• 上手簡(jiǎn)單，提供常用的各類組件，快速開始前端開發(fā)
• 導(dǎo)航欄、頁面布局JSON配置，無需代碼邏輯開發(fā)
• API數(shù)據(jù)模擬和API數(shù)據(jù)代理，讓前后端不再耦合，聯(lián)調(diào)更簡(jiǎn)單，效率更高
• 數(shù)據(jù)儀表盤功能，滿足常見的數(shù)據(jù)可視化需求，助力數(shù)據(jù)分析場(chǎng)景
• 內(nèi)置模版，只需簡(jiǎn)單配置就可以開發(fā)出想要的頁面，非前端同學(xué)也能快速上手開發(fā)
• 實(shí)用的腳手架功能，項(xiàng)目初始化、模板復(fù)用、模擬數(shù)據(jù)創(chuàng)建、調(diào)試server啟動(dòng)、框架升級(jí)一行命令通通搞定

開源首頁

https://github.com/baidu/NoahV

系統(tǒng)架構(gòu)

NoahV框架由五大部分組成，分別是：

1. 底層框架：采用上手簡(jiǎn)單易用的Vuejs
2. 組件模板庫：主要有運(yùn)維業(yè)務(wù)組件【服務(wù)樹、趨勢(shì)圖、儀表圖、數(shù)據(jù)面板、運(yùn)維流程、運(yùn)維表格、運(yùn)維表單等】和運(yùn)維場(chǎng)景組件【儀表盤】
3. 代碼質(zhì)量/規(guī)范：主要有API規(guī)范、開發(fā)規(guī)范、UI規(guī)范等，另外內(nèi)置單測(cè)工具，自動(dòng)生成各個(gè)頁面的單測(cè)模板，單測(cè)的覆蓋率、代碼覆蓋與否一目了然。
4. 功能特性：主要包括導(dǎo)航和頁面布局JSON配置、主題定制、訪問統(tǒng)計(jì)以及可以簡(jiǎn)化前后端聯(lián)調(diào)過程的本地?cái)?shù)據(jù)模擬和API數(shù)據(jù)代理功能
5. 命令行工具：提供實(shí)用的腳手架功能

業(yè)務(wù)組件一覽

• 圖標(biāo)

圖標(biāo)名稱參考font awesome命名習(xí)慣

• 樹

樹控件，支持層級(jí)結(jié)構(gòu)關(guān)系展示、展開收起等交互功能。

1. 支持節(jié)點(diǎn)選擇功能
2. 支持多節(jié)點(diǎn)選擇功能
3. 支持節(jié)點(diǎn)勾選功能
4. 支持節(jié)點(diǎn)拖動(dòng)功能
5. 支持節(jié)點(diǎn)搜索功能
6. 支持節(jié)點(diǎn)編輯功能
7. 支持節(jié)點(diǎn)異步加載功能
8. 支持節(jié)點(diǎn)添加和刪除功能
9. 支持節(jié)點(diǎn)展開的手風(fēng)琴效果
10. 支持選擇、勾選和展開收起事件監(jiān)聽

• 日歷組件

日期選擇控件，支持選擇時(shí)間段和快捷鍵設(shè)置

1. 支持選擇日期和時(shí)間段
2. 支持設(shè)置日期顯示格式
3. 支持設(shè)置快捷面板功能
4. 支持設(shè)置不可選日期
5. 支持設(shè)置日期和獲取日期
6. 支持監(jiān)聽選擇日期變化
7. 支持日期默認(rèn)選中功能
8. 支持日期顯示干預(yù)功能
9. 支持快捷面板默認(rèn)選中功能
10. 支持快捷面板反向高亮功能
11. 支持日期v-model雙向綁定

• 步驟組件

• 標(biāo)簽組件

• 條件搜索框

• 流程組件

流程控件，支持配置事務(wù)流程，增刪節(jié)點(diǎn)等

1. 支持配置流程
2. 支持流程中增刪節(jié)點(diǎn)
3. 支持通過插槽自定義卡片內(nèi)容

• 穿梭框

穿梭框控件，支持通過移動(dòng)條目表征選擇邏輯等

1. 支持簡(jiǎn)單移動(dòng)選擇場(chǎng)景
2. 支持分組移動(dòng)選擇場(chǎng)景

• 值班表

值班表日歷組件，支持配置多值班人員，多周期配置

• 省略組件

• 列表組件

• 圖表組件

• 趨勢(shì)圖

• 表單模板

以上只是介紹了部分業(yè)務(wù)組件，還有更多可以直接參考官方網(wǎng)站

快速開始

NoahV框架依賴Nodejs 6.0，在執(zhí)行如下步驟之前，請(qǐng)確保已經(jīng)安裝 Node.js v6.0 或以上。

1.安裝腳手架工具

# 安裝noahv-cli$ npm install noahv-cli -g# 查看使用幫助$ noahv –help

2.初始化一個(gè)項(xiàng)目

# 創(chuàng)建一個(gè)空目錄，進(jìn)入目錄中，運(yùn)行noahv init 命令創(chuàng)建一個(gè)通用項(xiàng)目$ mkdir project && cd project && noahv init# 運(yùn)行noahv init –dashboard 命令創(chuàng)建一個(gè)包含儀表盤功能的項(xiàng)目$ mkdir project && cd project && noahv init –dashboard

3.運(yùn)行項(xiàng)目

# 在項(xiàng)目根目錄啟動(dòng)調(diào)試server$ noahv start

4.復(fù)用模板

# 在項(xiàng)目根目錄復(fù)用模板創(chuàng)建頁面$ noahv create # 根據(jù)提示選擇需要?jiǎng)?chuàng)建的頁面類型，目前支持form、list、filterList、chart四種模板類型

總結(jié)

總體上來看，NoahV是一個(gè)非常不錯(cuò)的前端框架，而且是基于Vue的，現(xiàn)在很多的前端團(tuán)隊(duì)都使用Vue來作為前端開發(fā)框架，馬上Vue3.0也要來了，學(xué)起來！