【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发

Chase620 等级 941 0 0

前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electron-vue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果,借助成熟的 element-ui 或 bootstrap 肯定是最好的。

本文将介绍怎么让 electron-vue 与 element-ui 结合更加快捷开发我们的桌面应用程序。

一、安装 element-ui

这个安装非常简单。
如下命令:

> npm i element-ui -S 

记住这个命令是在 electron-vue 创建的项目根目录安装噢~

二、使用 element-ui

安装成功之后,我们现在就把它用到我们的 electron-vue 项目中。

1)main.js 文件加载 element-ui

打开 src/renderer/man.js 加载 element-ui

......
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
...... 

main.js 加载之后的完整代码示例:

import Vue from 'vue'
import axios from 'axios'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'
import router from './router'
import store from './store'

Vue.use(ElementUI)


if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app') 

在 main.js 加载 element-ui 之后,您可以在任何 .vue 文件中直接使用 element-ui 提供的组件。

2)使用 element-ui 组件

为了能快速验证您安装的 element-ui 是否生效。我们可以用 src/renderer/App.vue 来进行演示。

打开 App.vue 加入以下代码:

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row> 

注:此代码就定要加在 <template>...</template> 里面。

此时我们可以通过yarn run devnpm run dev 查看效果。此时会看到显示一组按钮。

三、编译安装包

我们通过 yarn run dev 这种形式开发能正常显示结果。但是它存在一个问题:通过 electron-packageelectron-builder 编译成安装包的时候会导致界面空白一片。

终于原因是 electron-vue 默认的组件里面只有 vue 才在编译白名单内。如果使用了第三方的的类库,一定要加到白名单。

修改:./.electron-vue/webpack.renderer.config 脚本。脚本如下代码:

let whiteListedModules = ['vue'] 

更改为:

let whiteListedModules = ['vue', 'element-ui'] 

如果以后加载了其他的跟页面渲染相关的类库,都要在这里添加到白名单。否则,通过 yarn run buildnpm run build 生成的安装包都将无法正常渲染界面出现空白的情况。

四、示例欣赏

以下示例就是我自己开发的一小玩意残次器。
它包含:

  • electron-vue
  • element-ui UI 库
  • electron-package 打包
  • 自定义系统托盘图标以及托盘图标右键菜单
  • 自定义系统标题栏(最小化/最大化/关闭)

注:在修改 src/main/index.js 的时候一定要注意开发环境与编译环境的处理。比如,我的处理方式如下:

if (process.env.NODE_ENV !== 'development') {
    // 系统托盘右键菜单
    var trayMenuTemplate = [
      {
          label: '设置',
          click: function () {} //打开相应页面
      },
      {
          label: '意见反馈',
          click: function () {}
      },
      {
          label: '帮助',
          click: function () {}
      },
      {
          label: '关于我们',
          click: function () {}
      },
      {
          label: '退出',
          click: function () {
              app.quit();
          }
      }
    ];

    trayIcon = path.join(__dirname, 'static/app.ico');
    appTray  = new Tray(trayIcon);
    // 图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
    // 设置此托盘图标的悬停提示内容
    appTray.setToolTip("It助手\n您的开发小帮手");
    // 设置此图标的右键菜单
    appTray.setContextMenu(contextMenu);
  } 

关键代码:

if (process.env.NODE_ENV !== 'development') {
// code ...
} 

通过 yarn run dev 的时候就是开发环境。通过 yarn run build 的时候就是编译环境。上面就是判断当前环境不是开发环境的时候生效。因为,在开发环境有很多如果底层支持的功能(系统托盘图标)是无法在开发环境使用的。所以,我们要做环境区分。

【Electron】electron-vue 借助  element-ui UI 库助力桌面应用开发

xxx.png

本文转自 https://www.jianshu.com/p/2bfe4286280d,如有侵权,请联系删除。

收藏
评论区

相关推荐

🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
极客手中的利器:Electron
作为一个前端开发人员,你可能已经听说过Electron(https://www.electronjs.org/)了, 你知道VS Code是基于这个技术开发的。 不但VS Code,目前一些大热的软件:飞书、Slack、skype的桌面版都是基于这个技术开发的。 即使如此,这也并不足以引起你的重视, 毕竟桌面软件式微,移动端和Web开发才是大方向
《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件
前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, antdesignvue, iView等成熟的UI框架, react生态的antdesign, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和
记录一次electron踩坑
Vue2.x版本 https://github.com/dmhsq/electronvuedmhsq(https://github.com/dmhsq/electronvuedmhsq) 或者 https://github.com/dmhsq/electronvue/tree/main/template(https://github.com
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
Vue UI组件库对比与选择
主流组件库对比PC端| UI组件库名 | github star | 是否可自定义主题 | 是否支持vue3 | 发布时间 | 稳定性 | 贡献者 || | | | | | | || | | 可自定义 | 支持,beta版本,, | 201608,4年半 | 长期支持,最新两个
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
Vue组件(30)封装一下数据列表的控件
UI库的 table好像前端喜欢叫 table,而后端喜欢叫grid。就是现实数据的列表。当然table还有其他的含义,UI库的table也是有其他的功能的。而数据列表控件其实也没啥好封装的,各种功能UI库都提供了,一般使用也是很方便的,只是为了我的那种想法还是需要小小的封装一下。功能 锁定行列(UI库自带) 多选(整理)
【Electron】第一个用 Electron 开发的桌面应用程序
2020 年注定是不平凡的一年,全国人民饱受疫情的困扰。好在目前已经抗疫已经取得关键性的成功。自己也好很久没有更新自己的博客。中年危机下,博主也在寻找自己的方向。坚信方向比努力更重要。这不,最近突然想开发一款至力于服务 PHP 开发者的工具。这款工具呢也是目前我经常会用到的一些功能。比如,JSON 美化、MD5 加密、正则、URL 重写、HOSTS 管理、经
11个基于vue的UI框架_U.R.M.L
Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView 是一个 UI 工具包,其中包含简洁又设计优雅的小部件和各种组件。iView 团队维护非常及时,最近一次的更新在19年3
5款vue前端UI框架
Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue前端ui框架。TOP5——VueBluVueBlu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵
(win环境)使用Electron打造一个桌面应用翻译小工具
初始化项目npm init 修改package.json "name": "trans", "version": "1.0.0", "main": "main.js", "license": "MIT", "scripts": "start": "electron .", "build":"electronpackager . ove
electron:桌面应用程序的革命
“ 你也许不了解electron,但你应该了解或使用过atom、vscode、xmin zend,没错他们所使用的开发技术就是electon,通过前端技术开发桌面应用程序,刚开始接触electron时,考虑最多的是性能问题,不过作为一个vscode、xmin zen重度使用者的我来说,基本上对其性能的担心减少了很多,并且发现了基于vue框架构造electro
从零使用electron搭建桌面端可视化编辑器
之前有朋友希望我基于H5Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooringelectron的github地址供大家参考学习. 如果大家有更好的方案, 可以随
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持