提醒：本人想找个本地看小说的软件，发现少之又少，索性自己研究一个本地TXT小说阅读器。平时工作较忙，不定时更新，随时太监。。。

欢迎大神批评指点！

前提：node、npm、vue-cli@3都安装好

项目分析

• 列表页

  
  列表页

• 阅读页

  
  阅读页

• 页面组件划分及大概的操作逻辑

  
  组件

• 分析
  选用element-ui组件
  可能涉及的组件：按钮、表格、导航
  electron：最大化、最小化、关闭、状态栏显示或隐藏、状态栏鼠标右键退出、任务栏还原和最小化
  还需要考虑到可改变窗口大小，所以要响应式
  node方位本地文件、txt文件
  我们这是本地文件，一些状态设置可以放到localStorage里

大概就这些，实际情况根据后面开发情况再探讨

快速创建项目：read-book

• vue create read-book
• vue add electron-builder
• vue add electron 选Import on demand（按需引入）；选cn-ZH（大陆下载）

提示：项目命名不能有大写，否则会报错
提示：安装electron-builder插件时，如果你之前安装过electron则选择一下版本，如果没有安装过，那么过程会很慢，看我之前写的一篇文章安装：npm i electron -g 安装慢的解决方法

自定义组件

定义Header.vue、BookLists.vue、ReadMain.vue分别引入到App.vue中，然后利用v-if来控制BookLists和ReadMain这两个组件哪一个显示

app.vue代码如下：

<template>
  <div id="app">
    <Header></Header>
    <BookLists v-if="list"></BookLists>
    <ReadMain v-else></ReadMain>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import BookLists from './components/BookLists.vue'
import ReadMain from './components/ReadMain.vue'

export default {
  name: 'app',
  components: {
    Header,
    BookLists,
    ReadMain
  },
  data(){
    return{
      list:true
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;  
}
</style>

初始化一下CSS样式

到项目》public》index.html中增加一下样式：

<style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>

写Header.vue

<template>
<div class="header">
    <div class="logo">大爷阅读器</div>
    <div v-if="list" class="importBook">
        <el-button size="mini" >导入<i class="el-icon-upload el-icon--right"></i></el-button>
    </div>
    <div v-else class="bookName"></div>
    <div class="handler">
        <el-button-group>
            <el-button type="primary"  size="mini" icon="el-icon-minus"></el-button>
            <el-button type="primary"  size="mini" icon="el-icon-full-screen"></el-button>
            <el-button type="primary"  size="mini" icon="el-icon-switch-button"></el-button>
        </el-button-group>
    </div>
</div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                list:true
            }
        }
    }
</script>

<style scoped>
 .header{
     display: flex;
     height: 30px;
     width: 100%;
 }
    .logo{
        display: flex;
        width: 100px;
        justify-content: center;
        align-items: center;
    }
    .bookName,.importBook{
        display: flex;
        align-items: center;
        flex: 1;
    }
    .handler{
        display: flex;
        width: 132px;
    }
</style>

注意：

我们这里用到了element组件，由于我们是按需引入的，所以要把这两个组件引入到我们的项目里
到项目》src》plugins》element.js中

import Vue from 'vue'
import { Button , ButtonGroup} from 'element-ui'

Vue.use(Button)
Vue.use(ButtonGroup)

看一下效果：

image.png

红色框里的是我们的效果，其他部分我们回头会干掉的。

今天就弄到这里，不定时更新，欢迎关注公众号交流

ITmonkey