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.js const { 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.js const { 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，完成，看效果。 结果

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