Electron+ElementUI+MockJs=数据生成服务器（二）

从这篇文章开始来介绍开发过程，代码所在地：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 如下表示成功： 此时表示成功 第五步：编写测试文件和入口文件 //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 运行成功 恭喜，项目已经搭建成功了，接下来可以安心撸代码了。

本文章由javascript技术分享原创和收集