vue-cli@3 + electron开发一款本地小说阅读器（一）
vue-cli@3 + electron开发一款本地小说阅读器（二）
vue-cli@3 + electron开发一款本地小说阅读器（三）

实现小说阅读

booklist.vue中在列表 el-table中增加双击事件

 <el-table
                    :data="tableData"
                    highlight-current-row
                    @row-dblclick="dblclickRow"
                    height="100%"
                    style="width: 100%">
···

方法中：子传父

dblclickRow(row) {   
                //向App.vue传参数
                this.$emit('toRead',row)
            }

App.vue中接收传过来的参数，组件中绑定toRead

 <BookLists v-if="list" @toRead="toRead"></BookLists>

方法中获取，我这里把参数放到了H5的缓存中，打算以后打开软件就进入列表页或者上次阅读页

//接受BookList.vue传的小说名称
    toRead(data){

      //往Header中传参
      this.bookName = data.bookName;

      //将当前book信息保存在本地
      let localStorage = {
        'bookName':data.bookName,
        'src':data.src,
        'list':false
      };

      localStorage = JSON.stringify(localStorage); //转化为JSON字符串
      window.localStorage.setItem("local", localStorage);

      //切换为read页
      this.list =false;

    },

既然已经写到缓存中了，在readmain.vue中直接调用就可以，然后利用fs.readFile把数据读出来就可以，注意.localStorage是永久缓存。

mounted:function () {
            let localStorage=JSON.parse(window.localStorage.getItem("local"));
            let bookPath = localStorage.src
            fs.readFile(bookPath,'utf-8',(err,data) => {
                if (err) throw err;

                this.txtContent = data;
            })
        },

问题一：数据读出来后，会发现没有样式。空格、回车都没有了。

解决办法，用<pre></pre>

 <div class="txtContent"><pre>{{txtContent}}</pre></div>

问题二：文本不自动换行，怎么办？

解决方法，用css：

 pre {
        white-space: pre-wrap;
    }

问题三：为什么只能读utf-8格式的文本？

这个坑，我也没有解决，我用了iconv-lite进行转码，但是vue报错:
uncaught TypeError: __webpack_require__(...) is not a function
单独用vue/cli@3.0创建了一个项目测试下来还是报错。
单独electron项目引用iconv-lite发现没有问题，如果有问题请检查有没有将nodeIntegration: true设置为true：

win = new BrowserWindow({ width: 800, height: 600, webPreferences: {
    nodeIntegration: true
  } })

有解决方法的欢迎给我留言，不胜感激！

效果： 效果

结束语：阅读器的大概思路就这样了，当然含有很多问题没有解决，比如阅读记录、标签、文件不存在、大文件加载慢、换肤、字体放大缩小等等一系列问题，后续有时间慢慢优化。最近忙公司事多，尽量更新。

欢迎关注公众号

ITmonkey