sunrise-electron-vue 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
sunrise-electron-vue 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
sunrise-electron-vue 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
sunrise-electron-vue 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
sunrise-electron-vue 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 SunriseC
适用人群 未知
收录时间 2019-12-23

软件简介

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
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
2017/10/18 22:32

Electron-vue 起步

# 起步 --- 该样板代码被构建为 vue-cli 的一个模板,并且包含多个选项,可以自定义你最终的脚手架程序。本项目需要使用 node@^7 或更高版本。electron-vue 官方推荐 yarn 作为软件包管理器,因为它可以更好地处理依赖关系,并可以使用 yarn clean 帮助减少最后构建文件的大小。 ```` # 安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue my-project # 安装依赖并运行你的程序 cd m...

0
5
发表了博客
2019/04/04 22:07

vue-electron脚手架

vue-electron官方文档(中文):https://simulatedgreg.gitbooks.io/electron-vue/content/cn vue-electron官方文档(英文):https://simulatedgreg.gitbooks.io/electron-vue/content/en 1.脚手架搭建流程步骤 # 安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue my-project # 安装依赖并运行你的程序 cd my-project yarn # 或者 npm install yarn run dev # 或者 npm run dev ...

0
1
发表于大前端专区
2019/05/25 19:27

vue Electron notepad

原文链接: vue Electron notepad 上一篇: idea 创建 kotlin hello 项目 下一篇: 使用GitHub Pages 发布静态网站 参考 Electron: 从零开始写一个记事本app 创建项目 vue create vue-electron cd vue-electron vue add electron-builder npm run electron:serve 项目结构 创建相关menu, 设置快捷键, 绑定函数 background.js "use strict"; import { Menu, MenuItem } from "electron"; import appMenuTemplate from...

0
0
发表了博客
2019/08/28 09:57

electron-vue打包

electron和vue整合项目的打包方式: 首先,打包方式不止这一种,我就说一下我打包成功的那种,嘻嘻~~ 1、全局安装electron-builder打包工具:npm install -g electron-builder 2、在项目根目录下的package.json文件中配置打包相关信息: 图中圈住部分是在windows下打包的配置,ia32代表生成的exe文件是32位的,因为64位电脑可运行32和64位的exe文件,所以直接打包32位就可以了, 如果同时打包32位和64位的exe文件,体积会增大,...

0
0
发表了博客
2018/04/04 11:17

electron打包vue项目

electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。 快速开始electron 直接运行github上关于electron的构建工具 git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 运行界面展示: el...

0
0
发表于大前端专区
2020/09/22 15:43

electron-vue技术篇

一份针对于electron-vue项目整理的搭建、运行、打包过程的踩坑总结分享 首先为了保证安装效率,采用cnpm或者yarn指令来安装,前提是安装了node环境 安装全局yarn,最好设置淘宝镜像 npm install -g yarn 安装全局vue-cli npm install vue-cli -g 安装3.0+版本vue-cli(现在最新已经到4.5.6版本) npm install @vue/cli -g 若想更新vue-cli到最新版,要先卸载当前版本 npm uninstall vue-cli -g 创建electron-vue项目(方...

0
0
发表于大前端专区
2018/09/25 10:29

Electron-vue 项目初始化

### Electron-vue 项目初始化 ##### 0. npm 设置国内镜像 ```shell npm config set registry https://registry.npm.taobao.org/ npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/ ``` ##### 1. 安装 vue-cli 和 脚手架样板代码 1. 按装vue-cli ```shell npm install -g vue-cli vue init simulatedgreg/electron-vue my-project ``` 2. 安装依赖并运行你的程序 ```shell my-project npm install npm ru...

0
2
发表于大前端专区
2019/05/07 14:32

vue 创建 electron 项目

原文链接: vue 创建 electron 项目 上一篇: Electron 简单使用 下一篇: vue 创建pwa 项目 官方插件 初始化vue项目 vue create vue-electron 添加插件支持 需要科学上网 https://github.com/nklayman/vue-cli-plugin-electron-builder cd vue-electron vue add electron-builder 运行, 具有和vue 开发时一样的热重启, 相比原始electron项目需要自己配置方便很多 npm run electron:serve 构建 npm run electron:bui...

0
0
发表了博客
2019/07/25 01:04

electron-vue小试身手

最近一个项目(vue)需求是用硬件来触发web端页面显示以及效果的切换,客户的硬件设备只支持用tcp协议通讯,而我们的前端呢是用不了tcp的,众所周知在浏览器端,我们只能用http/https协议(ajax)和websocket协议来通讯,前端页面开发完成之后,我用node起了一个websocket实现了项目需求,但是终归还是要用tcp的啊。这时候就得用之前同事说过的electron来构建整个项目了(之前看了一个demo把vue打包后的静态文件打包成桌面程序)。但是...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
12 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部