Electron+ElementUI+MockJs=数据生成服务器（三）
接下来我们继续暴力撸代码，我们来创立第一个页面——项目列表页面。代码所在地：https://gitee.com/underline/DataMock-Electron.git
首先，我们在pages目录下创立project-list文件夹，且在内部创立index为名称的html、css和js文件，此页面的所有的代码将写在这三个文件中。如下：
最新项目目录
好的，开始撸代码了（项目列表页长什么样子第一篇文章已经详情
）：
/* project-list/index.css */#root { width: 100%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;}#root .project-item { width: 100px; line-height: 100px; border: 1px solid #eee; border-radius: 5px; margin: 10px; font-size: 16px; font-family: '微软雅黑 Light'; cursor: pointer; text-align: center; white-space: nowrap;/*内容超宽后禁止换行显示*/ overflow: hidden;/*超出部分隐藏*/ text-overflow: ellipsis;/*文字超出部分以省略号显示*/}#root .project-item:hover { box-shadow: 0 0 5px #888888;}::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*宽分别对应竖滚动条的尺寸*/ height: 5px; /*高分别对应横滚动条的尺寸*/}::-webkit-scrollbar-track { /*滚动条里面轨道*/ border-radius: 5px;}::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; background-color: #eee;}<!-- project-list/index.html --><!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>项目列表</title> <link rel="stylesheet" href="../../libs/element-ui@2.12.0.css" /> <link rel="stylesheet" href="./index.css" /> <style> div[v-cloak] { display: none; } </style></head><body><div id="root" v-cloak> <div class="project-item" v-for="item in projects" :key="item" @click="gotoProjectDetail(item)" v-text="item"></div> <div class="project-item" @click="createProject" style="display:flex;flex-flow: column nowrap;justify-content: center;align-items: center;line-height: normal;height:100px;"> <i class="el-icon-plus"></i> <p style="color:#409eff">新建项目</p> </div></div><script src="../../libs/vue@2.6.10.js"></script><script src="../../libs/element-ui@2.12.0.js"></script><script src="./index.js"></script></body></html>// project-list/index.jsconst { BrowserWindow, Menu } = require('electron').remote;const curWin = require('electron').remote.getCurrentWindow();const ipcRenderer = require('electron').ipcRenderer;const fs = require('fs');const path = require('path');new Vue({ el: document.getElementById("root"), data: { projects: [], selectedProject: '' }, created() { ipcRenderer.on('pushProject', (event, args) => { this.projects.push(args.projectName); }); }, mounted() { // fs.opendirSync(path.join("root", "projects")).readSync() //读取项目目录 fs.readdirSync(path.resolve("/data-mock-test", "projects"), {withFileTypes: true}).forEach(dirent => { if (dirent.isDirectory()) { this.projects.push(dirent.name); } }); }, methods: { createProject() { //点击 新建 按钮需要调用的方法 }, gotoProjectDetail(project) { //点击 某一个项目 需要调用的方法 } }});// 最后还需要改一下 入口 index.js// src/electron/index.jsconst { app, BrowserWindow } = require('electron')function createWindow () { // 创立浏览器窗口 let win = new BrowserWindow({ width: 400, //窗口的宽度 height: 600, //窗口的高度 center: true, //能否居中 icon: './favicon.ico', //图标 webPreferences: { //打开浏览器高级功能 nodeIntegration: true, webviewTag: true }, autoHideMenuBar: true, resizable: false, //能否支持大小调整 minimizable: false //最小化 }); // 加载index.html文件 win.loadFile("./views/pages/project-list/index.html"); win.on('closed',()=>{ win = null });}app.whenReady().then(createWindow)ok，完成，看效果。
结果
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Electron+ElementUI+MockJs=数据生成服务器（三）
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Electron+ElementUI+MockJs=数据生成服务器（三）
