接下來我們繼續暴力擼代碼，我們來創建第一個頁面——項目列表頁面。代碼所在地：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/[email protected]" />
<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/[email protected]"></script>
<script src="../../libs/[email protected]"></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，完成，看效果。
