SunRise 项目的前端 sunrise-electron-vue

SunRise 项目的前端 sunrise-electron-vue

MIT
JavaScript
跨平台
2019-12-23
SunriseC

【年终提升】2019尾声,来 OSC·年终盛典收割技术干货,get新技能!>>>

sunrise-electron-vue [Gitee] [GitHub] 是 SUNRISE 系列项目的前端和 sunrise-spring-boot [Gitee] [GitHub] 是姊妹项目,该项目是一个后台前端解决方案,它基于 vue.js 开发堆栈和 electron 并使用 element-ui 实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。

在线预览

浏览器支持

IE / Edge Firefox Chrome Safari
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions

前序准备

你需要在本地安装 node 和 git。本项目技术栈基于 ES2015+vuevuexvue-router 、vue-cli 、axios 和 element-ui 等,所有的请求数据都使用 Mock.js 进行模拟,或使用 sunrise-spring-boot [Gitee] [GitHub] 进行后端的快速搭建进行数据获取,提前了解和学习这些知识会对使用本项目有很大的帮助。

功能

- 登录 / 注销 / 锁屏 / 修改密码 / 修改个人信息

- 仪表盘面板

- 账户管理
  - 用户管理
  - 角色管理
  - 组织管理
  - 权限管理

- 系统设置
  - 菜单管理
  - 字典管理
  - 附件管理
  - 任务管理

- 系统日志
  - 交互日志
  - 任务日志

- 内置插件
  - Cron表达式选择器
  - 数据分页表格组件
  - Markdown 编辑组件
  - Json编辑器
  - 数字滚动

- 其它页面
  - 404
  - 500

- 多环境发布
  - 浏览器生产 桌面级生产

- 全局功能
  - 国际化多语言
  - 多种动态换肤
  - 侧边栏自适应收缩(支持三种响应级别)
  - 侧边栏多级路由嵌套
  - 侧边栏支持外链
  - 单路由页面多开
  - 动态面包屑
  - 快捷导航(标签页)
  - 标签页批量关闭
  - Echarts 图表
  - font-awesome 图标库
  - IconFont 图标库
  - 本地/后端 mock.js 数据
  - Screenfull全屏
  - 全局遮罩引导
  - 通知信息处理(后端长连接通知信息)
  - 前端异常捕获(会尝试调用后端日志记录接口)
  - 浏览器版本检测
  - 按钮级权限

开发

# 克隆项目
git clone https://gitee.com/sunrise-chang/electron-vue-sunrise.git

# 进入项目目录
cd electron-vue-sunrise

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动浏览器开发服务或启动桌面开发服务
npm run serve
npm run electron:serve

发布

# 构建浏览器生产环境
npm run build

# 构建win桌面生产环境(精简打包)
npm run electron:build

# 构建win桌面生产环境(使用内置模板t1)
npm run electron:build:win:t1

# 构建win桌面生产环境(使用内置模板t2)
npm run electron:build:win:t2

# 构建linux桌面生产环境
npm run electron:build:linux

其它

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

# 代码格式检查
npm run lint
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

Electron-vue 起步

# 起步 --- 该样板代码被构建为 vue-cli 的一个模板,并且包含多个选项,可以自定义你最终的脚手架程序。本项目需要使用 node@^7 或更高版本。electron-vue 官方推荐 yarn 作为软件包管理器,...

2017/10/18 22:32
303
0
Electron-Vue使用el-table不显示

参考地址Use element-ui in electron-vue template have strange problems 把element-ui加入到.electron-vue/webpack.renderer.config.js文件中的白名单里面 在这句话let whiteListedModule...

2019/11/23 19:39
66
0
Electron开发实战之记账软件2——使用electron-vue初始化项目并升级部分包

代码仓库: https://github.com/hilanmiao/LanMiaoDesktop Electron-Vue中文介绍官方网站,内容挺多的,从头看一遍,后面有很多地方需要参考这些资料。 https://simulatedgreg.gitbooks.io/...

2019/04/11 16:01
5K
1
2018年最值得关注的30个Vue开源项目

译者按: 学习优秀的开源项目是提高代码水平最有效的方式。 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译者: Fundebug 为了保证可读性,本文采用意译而非直...

2018/05/30 15:32
6.5K
0
2018年最值得关注的30个Vue开源项目

原文链接:blog.fundebug.com 899元带你拿下腾讯官方微信小程序开发 NEXT 学位!成为小程序开发领域的领先开发者!立即报名了解详情:ke.qq.com 译者按: 学习优秀的开源项目是提高代码水平最...

2018/05/30 14:13
36
0
自定义跨平台比特币实时行情看板

![](https://static.oschina.net/uploads/img/201805/24192235_l9n0.png) ### 一、前言 前段时间跟朋友炒币,总是需要打开交易平台才能看行情,有点麻烦,而且那个窗口也特别大,内容也很杂。...

2018/05/23 17:04
1.6K
1
30个值得关注的Vue开源项目

译者按: 学习优秀的开源项目是提高代码水平最有效的方式。 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译者: Fundebug 为了保证可读性,本文采用意译而非直...

2019/02/25 11:16
106
0
SnippetsBox开发之路-开发选择型(二)

没什么选择的,因为要学习golang,所以后端用golang做web api;前端使用的Electron,那顺便学习下现在比较火的vue.js;数据库暂用MySQL,直接放到docker容器中,参考软件:Dash。 恩~就这样没...

2018/07/09 16:15
22
0
Electron+vue聊天仿微信界面|electron-vue聊天实践

简介 electron-vchat实践聊天项目是基于electron+vue+electron-vue+vuex+Node技术开发的仿微信客户端界面聊天室。有实现消息发送/表情,图片/视频预览,拖拽上传/粘贴截图发送/微信dll截图,...

01/10 22:48
47
0
Electron-vue 项目初始化

Electron-vue 项目初始化 0. npm 设置国内镜像 npm config set registry https://registry.npm.taobao.org/ npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/ 1. 安...

2018/09/25 10:29
1K
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部