从这篇文章开始来介绍开发过程，代码所在地：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
运行成功
恭喜，项目已经搭建成功了，接下来可以安心撸代码了。
网友评论