从这篇文章开始来介绍开发过程, 代码所在地: https://gitee.com/underline/DataMock-Electron.git. 介绍下前置条件哈: vscode,electron,mock.JS,vue,elementUI,codemirror 还是要晓得是个啥, 哈哈.
接下来管他三七二十一, 直接暴力撸......
第一步: 肯定要先创建一个项目, 其目录结构如下:
文件夹结构
第二步: NPM 初始化项目
- cd src/electron
- NPM init -y
其后需要修改 package.JSON 中的 name 为别的名字, 否则后边会有坑
初始化一下项目
第三步: 创建入口文件, 导入相关库 (自行下载), 如下:
第四步: 安装 electron
// 此时先制定下载 electron 的源为淘宝, 下载更加顺畅 NPM config set electron_mirror https://npm.taobao.org/mirrors/electron/ // 然后安装 electron 6.0.1 版本 NPM install --save-dev electron@6.0.1
如下表示成功:
此时表示成功
第五步: 编写测试文件和入口文件
<!DOCTYPE html> <HTML lang="zh-cn"> <head> <meta charset="UTF-8"> <title> 测试文件 </title> <link rel="stylesheet" href="../../libs/element-ui@2.12.0.CSS" /> </head> <body> <div id="root"> {{testMsg}} </div> <script src="../../libs/vue@2.6.10.js"> </script> <script src="../../libs/element-ui@2.12.0.js"> </script> <script> var vm = new Vue({ el: document.getElementById("root"), data: { testMsg: "这是一个测试" } }) </script> </body> </HTML>
//electron 入口文件 const { App, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载测试文件 win.loadFile('./views/pages/test/test.html') } App.whenReady().then(createWindow)
第六步: 添加启动命令, 修改 package.JSON 中的 scripts 属性, 加入 start 命令, 如下:
{ "name": "datamock-electron", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\"&& exit 1", "start": "electron ." }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "electron": "^6.0.1" } }
最后运行, 测试.
NPM run start
运行成功
恭喜, 项目已经搭建成功了, 接下来可以安心撸代码了.
来源: http://www.jianshu.com/p/791300f99992