接下来我们继续暴力撸代码, 我们来创建第一个页面 -- 项目列表页面. 代码所在地: 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, 完成, 看效果.
结果
来源: http://www.jianshu.com/p/b2535ec70daa