一、初始化项目
运行，vue init simulatedgreg/electron-vue 项目名称
| 1 | vue init simulatedgreg /electron-vue admin |
这里的项目名称是“admin”
如果没有安装vue脚手架，请查看《》
一路回车
然后运行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 |
二、代码编写
参照《》安装所需的依赖
| 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 |
参照《》的代码如下：
入口文件：
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跨域。
运行之前项目的后端项目《》：
| 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，任何平台的前端都不怕”。