接下来我们继续暴力撸代码，我们来创建第一个页面——项目列表页面。代码所在地：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.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，完成，看效果。
结果
网友评论