百度開源基于vue.js的高效前端應(yīng)用程序框架——NoahV（前端開源vue項目）
官網(wǎng)介紹
NoahV是一個基于vue開發(fā)的前端應(yīng)用框架，主要適用于常見的后臺管理系統(tǒng)，官網(wǎng)地址：
特性：
- 上手簡單，提供常用的各類組件，快速開始前端開發(fā)
- 導(dǎo)航欄、頁面布局JSON配置，無需代碼邏輯開發(fā)
- API數(shù)據(jù)模擬和API數(shù)據(jù)代理，讓前后端不再耦合，聯(lián)調(diào)更簡單，效率更高
- 數(shù)據(jù)儀表盤功能，滿足常見的數(shù)據(jù)可視化需求，助力數(shù)據(jù)分析場景
- 內(nèi)置模版，只需簡單配置就可以開發(fā)出想要的頁面，非前端同學(xué)也能快速上手開發(fā)
- 實用的腳手架功能，項目初始化、模板復(fù)用、模擬數(shù)據(jù)創(chuàng)建、調(diào)試server啟動、框架升級一行命令通通搞定
開源首頁
https://github.com/baidu/NoahV
系統(tǒng)架構(gòu)
NoahV框架由五大部分組成，分別是：
- 底層框架：采用上手簡單易用的Vuejs
- 組件模板庫：主要有運維業(yè)務(wù)組件【服務(wù)樹、趨勢圖、儀表圖、數(shù)據(jù)面板、運維流程、運維表格、運維表單等】和運維場景組件【儀表盤】
- 代碼質(zhì)量/規(guī)范：主要有API規(guī)范、開發(fā)規(guī)范、UI規(guī)范等，另外內(nèi)置單測工具，自動生成各個頁面的單測模板，單測的覆蓋率、代碼覆蓋與否一目了然。
- 功能特性：主要包括導(dǎo)航和頁面布局JSON配置、主題定制、訪問統(tǒng)計以及可以簡化前后端聯(lián)調(diào)過程的本地數(shù)據(jù)模擬和API數(shù)據(jù)代理功能
- 命令行工具：提供實用的腳手架功能
業(yè)務(wù)組件一覽
- 圖標(biāo)
圖標(biāo)名稱參考font awesome命名習(xí)慣
- 樹
樹控件，支持層級結(jié)構(gòu)關(guān)系展示、展開收起等交互功能。
- 支持節(jié)點選擇功能
- 支持多節(jié)點選擇功能
- 支持節(jié)點勾選功能
- 支持節(jié)點拖動功能
- 支持節(jié)點搜索功能
- 支持節(jié)點編輯功能
- 支持節(jié)點異步加載功能
- 支持節(jié)點添加和刪除功能
- 支持節(jié)點展開的手風(fēng)琴效果
- 支持選擇、勾選和展開收起事件監(jiān)聽
- 日歷組件
日期選擇控件，支持選擇時間段和快捷鍵設(shè)置
- 支持選擇日期和時間段
- 支持設(shè)置日期顯示格式
- 支持設(shè)置快捷面板功能
- 支持設(shè)置不可選日期
- 支持設(shè)置日期和獲取日期
- 支持監(jiān)聽選擇日期變化
- 支持日期默認(rèn)選中功能
- 支持日期顯示干預(yù)功能
- 支持快捷面板默認(rèn)選中功能
- 支持快捷面板反向高亮功能
- 支持日期v-model雙向綁定
- 步驟組件
- 標(biāo)簽組件
- 條件搜索框
- 流程組件
流程控件，支持配置事務(wù)流程，增刪節(jié)點等
- 支持配置流程
- 支持流程中增刪節(jié)點
- 支持通過插槽自定義卡片內(nèi)容
- 穿梭框
穿梭框控件，支持通過移動條目表征選擇邏輯等
- 支持簡單移動選擇場景
- 支持分組移動選擇場景
- 值班表
值班表日歷組件，支持配置多值班人員，多周期配置
- 省略組件
- 列表組件
- 圖表組件
- 趨勢圖
- 表單模板
以上只是介紹了部分業(yè)務(wù)組件，還有更多可以直接參考官方網(wǎng)站
快速開始
NoahV框架依賴Nodejs 6.0，在執(zhí)行如下步驟之前，請確保已經(jīng)安裝 Node.js v6.0 或以上。
1.安裝腳手架工具
# 安裝noahv-cli$ npm install noahv-cli -g# 查看使用幫助$ noahv –help
2.初始化一個項目
# 創(chuàng)建一個空目錄，進(jìn)入目錄中，運行noahv init 命令創(chuàng)建一個通用項目$ mkdir project && cd project && noahv init# 運行noahv init –dashboard 命令創(chuàng)建一個包含儀表盤功能的項目$ mkdir project && cd project && noahv init –dashboard
3.運行項目
# 在項目根目錄啟動調(diào)試server$ noahv start
4.復(fù)用模板
# 在項目根目錄復(fù)用模板創(chuàng)建頁面$ noahv create # 根據(jù)提示選擇需要創(chuàng)建的頁面類型，目前支持form、list、filterList、chart四種模板類型
總結(jié)
總體上來看，NoahV是一個非常不錯的前端框架，而且是基于Vue的，現(xiàn)在很多的前端團(tuán)隊都使用Vue來作為前端開發(fā)框架，馬上Vue3.0也要來了，學(xué)起來！
