sunrise-electron-vueSunRise 項(xiàng)目的前端

sunrise-electron-vue [Gitee] [GitHub] 是 SUNRISE 系列項(xiàng)目的前端和 sunrise-spring-boot [Gitee] [GitHub] 是姊妹項(xiàng)目，該項(xiàng)目是一個后臺前端解決方案，它基于 vue.js 開發(fā)堆棧和 electron 并使用 element-ui 實(shí)現(xiàn)。它使用了最新的前端技術(shù)棧，內(nèi)置了 i18n 國際化解決方案，動態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級中后臺產(chǎn)品原型。相信不管你的需求是什么，本項(xiàng)目都能幫助到你。

在線預(yù)覽

• [Gitee]
• [GitHub]

瀏覽器支持

前序準(zhǔn)備

你需要在本地安裝 node 和 git。本項(xiàng)目技術(shù)棧基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui 等，所有的請求數(shù)據(jù)都使用 Mock.js 進(jìn)行模擬，或使用 sunrise-spring-boot [Gitee] [GitHub] 進(jìn)行后端的快速搭建進(jìn)行數(shù)據(jù)獲取，提前了解和學(xué)習(xí)這些知識會對使用本項(xiàng)目有很大的幫助。

功能

- 登錄 / 注銷 / 鎖屏 / 修改密碼 / 修改個人信息

- 儀表盤面板

- 賬戶管理
  - 用戶管理
  - 角色管理
  - 組織管理
  - 權(quán)限管理

- 系統(tǒng)設(shè)置
  - 菜單管理
  - 字典管理
  - 附件管理
  - 任務(wù)管理

- 系統(tǒng)日志
  - 交互日志
  - 任務(wù)日志

- 內(nèi)置插件
  - Cron表達(dá)式選擇器
  - 數(shù)據(jù)分頁表格組件
  - Markdown 編輯組件
  - Json編輯器
  - 數(shù)字滾動

- 其它頁面
  - 404
  - 500

- 多環(huán)境發(fā)布
  - 瀏覽器生產(chǎn) 桌面級生產(chǎn)

- 全局功能
  - 國際化多語言
  - 多種動態(tài)換膚
  - 側(cè)邊欄自適應(yīng)收縮（支持三種響應(yīng)級別）
  - 側(cè)邊欄多級路由嵌套
  - 側(cè)邊欄支持外鏈
  - 單路由頁面多開
  - 動態(tài)面包屑
  - 快捷導(dǎo)航(標(biāo)簽頁)
  - 標(biāo)簽頁批量關(guān)閉
  - Echarts 圖表
  - font-awesome 圖標(biāo)庫
  - IconFont 圖標(biāo)庫
  - 本地/后端 mock.js 數(shù)據(jù)
  - Screenfull全屏
  - 全局遮罩引導(dǎo)
  - 通知信息處理(后端長連接通知信息)
  - 前端異常捕獲(會嘗試調(diào)用后端日志記錄接口)
  - 瀏覽器版本檢測
  - 按鈕級權(quán)限

開發(fā)

# 克隆項(xiàng)目
git clone https://gitee.com/sunrise-chang/electron-vue-sunrise.git

# 進(jìn)入項(xiàng)目目錄
cd electron-vue-sunrise

# 安裝依賴
npm install

# 建議不要直接使用 cnpm 安裝依賴，會有各種詭異的 bug?？梢酝ㄟ^如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 啟動瀏覽器開發(fā)服務(wù)或啟動桌面開發(fā)服務(wù)
npm run serve
npm run electron:serve

發(fā)布

# 構(gòu)建瀏覽器生產(chǎn)環(huán)境
npm run build

# 構(gòu)建win桌面生產(chǎn)環(huán)境(精簡打包)
npm run electron:build

# 構(gòu)建win桌面生產(chǎn)環(huán)境(使用內(nèi)置模板t1)
npm run electron:build:win:t1

# 構(gòu)建win桌面生產(chǎn)環(huán)境(使用內(nèi)置模板t2)
npm run electron:build:win:t2

# 構(gòu)建linux桌面生產(chǎn)環(huán)境
npm run electron:build:linux

其它

# 輸出webpack的配置文件
npm run inspect

# 代碼格式檢查
npm run lint