spring boot + vue + element

 前言

---

 

　　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

 

关闭代理

?

1 2	npm config delete proxy npm config delete https-prox

 

也可以使用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

如果你觉得我的博客对你有帮助，可以给我点儿打赏，左侧微信，右侧支付宝。

有可能就是你的一点打赏会让我的博客写的更好:)

作者：刘冬.NET 博客地址：http://www.cnblogs.com/GoodHelper/ 欢迎转载，但须保留版权