Electron+ElementUI+MockJs=数据生成服务器(二)

  • 时间:2020-04-24 17:42 作者:jaimor 来源: 阅读:100
  • 扫一扫,手机访问
摘要:从这篇文章开始来详情开发过程,代码所在地:https://gitee.com/underline/DataMock Electron.git。详情下前置条件哈:vscode、electron、mock.js、vue、elementUI、codemirror还是要晓得是个啥,哈哈。接下来管他三七二十一

从这篇文章开始来详情开发过程,代码所在地:https://gitee.com/underline/DataMock-Electron.git。详情下前置条件哈:vscode、electron、mock.js、vue、elementUI、codemirror还是要晓得是个啥,哈哈。
接下来管他三七二十一,直接暴力撸……
第一步:一定要先创立一个项目,其目录结构如下:

文件夹结构

第二步:npm初始化项目

cd src/electronnpm 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
运行成功

恭喜,项目已经搭建成功了,接下来可以安心撸代码了。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部