Electron

2018/03/15 16:48
阅读数 575

spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

 

 前言


 

  Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个项目在2014春季开源。

目前它已成为开源开发者、初创企业和老牌公司常用的开发工具。 看看谁在使用Electron 。

继续往下阅读可以了解Electron的贡献者们和已经发布的版本,或者直接阅读快速开始指引来开始用Electron来构建应用。

(摘抄至electronjs.org)

 

 

 

一、初始化项目


 

运行,vue init simulatedgreg/electron-vue 项目名称

1
vue init simulatedgreg /electron-vue  admin

  

这里的项目名称是“admin” 

如果没有安装vue脚手架,请查看《spring boot + vue + element-ui全栈开发入门——windows开发环境》 

 

 

 

一路回车

 

 然后运行npm install来安装依赖,运行方式和之前一样。

如果遇到run dev或者run build的时候出错,可能是因为国内的网络下载“electron-v1.8.3-win32-x64.zip”出错,这时,你需要设置npm的代理:

1
2
npm config  set  proxy http: // 服务器IP或域名:端口号
npm config  set  https-proxy http: // 服务器IP或域名:端口号

  

如果需要用户名密码:

1
npm config  set  proxy http: // 用户名:密码@服务器IP或域名:端口号
npm config set https-proxy http://用户名:密码@服务器IP或域名:端口号

  

设置回原库

1
npm config  set  registry http: //registry .npmjs.org

 

也可以使用yarn。

1
npm  install  -g yarn

  

安装依赖、开发模式运行和编程的命令分别是:

1
2
3
yarn  install
yarn run dev
yarn run build

  

 

项目构建完毕后,结构如下图所示:

和之前项目区别是,main是用于桌面程序的代码,render是用于渲染的代码。我们只需要在render文件夹里写代码就可以。

 

开发模式运行:

1
npm run dev

  

 

 

二、代码编写


 

 参照《spring boot + vue + element-ui全栈开发入门——集成element-ui》安装所需的依赖

 

1
2
3
cnpm  install  --save element-ui
cnpm  install  --save-dev node-sass
cnpm  install  --save-dev sass-loader<br>cnpm  install  --save font-awesome

  

 

 参照《spring boot + vue + element-ui全栈开发入门——前端列表页面开发》的代码如下:

 

入口文件:

  main.js

其中 axios.defaults.baseURL = 'http://localhost:18080' 是设置后端项目URL,而这可以根据具体情况写到配置文件中,开发环境调用开发环境的配置,生产环境调用生产环境配置。

 

路由文件:

  router/index.js

 

 主页面:

  Main.vue

 

会员数据列表页面:

  Member.vue

 

结构如下图所示:

 

 

还有,在运行之前,我们需求修改src/main/index.js的配置:

复制代码
function createWindow() {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      webSecurity: false
    }
  })
复制代码

 

其目的是为了实现js跨域。

 

运行之前项目的后端项目《spring boot + vue + element-ui全栈开发入门——spring boot后端开发》:

1
2
mvn package
java -jar target /demo .jar

  

 

运行项目,效果如下:

 

 

 

二、生成安装包


 

1
npm run build

 

  

 

如提示缺少vue组建,是因为registry的问题,因为国内taobao镜像没有Electron的依赖环境。所以需要设置回默认的 registry,并使用设置proxy的方式下载依赖环境。

如果提示“icon source "build/icons/icon.ico" not found”

就把“icons”加到build目录下,下载icons请点击链接,根据具体情况修改icons。

生成好后,出现“admin Setup 0.0.0.exe”的文件,即安装程序。

我运用这个安装程序后,打开刚刚开发好的程序,效果如图所示:

 

 

发现,虽然只用到了一些前端技术,但已经能够开发出桌面应用了。小时候,老师说:“学好数理化,走遍天下都不怕”。而现在是:“学会了node,任何平台的前端都不怕”。

 

 返回目录

 

代码下载地址 : https://github.com/carter659/electron-vue-example.git
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部