用Vue实现Web阅读器开发项目总结

本文先介绍开发前的准备工作（搭建静态资源服务器+图标生成+安装node.js环境），并通过vue命令生成vue-cli脚手架，形成项目开发框架。具体的阅读器功能实现见下篇。本次开发采用的是epub(电子书出版物)格式的电子书，目前比较主流的电子书阅读器对epub都有良好的支持。

图标生成

首先通过阿里巴巴矢量图标库等下载好需要的图标，本项目使用的电子书和图标资源下载。在IcoMoon新建图标集合，导入本地图标，点击generate font生成字体图标，然后下载解压。

环境搭建

**安装Node.js和Vue.js环境 ** 通过vue init webpack搭建Vue项目脚手架 启动项目 npm run dev启动项目，成功，可在localhost:8080访问站点。打开项目文件中config/index.js将host:'localhost'改为host:'0.0.0.0'，就可以通过本地ip地址查看。windows下查看本地ip：打开控制台，输入ipconfig;uinx指令是ifconfig。 搭建静态资源服务器 将电子书拷贝到static目录下，然后通过站点地址加上static/Engine.epub，下载电子书。下载成功，说明静态资源服务器搭建好了。 下载依赖包

1
2


npm install node-sass sass-loader --save-dev
npm install epubjs --save

在src/assets下新建styles文件夹，将字体图标的fonts和style.css拷贝进去，将style.css改为icon.css。然后在main.js中import '@/assets/styles/icon.css'。

viewport配置

在index.html中找到viewport更改为

1

<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

以上配置可以让网页配置，适配手机屏幕宽度，并且不允许用户修改，不允许用户缩放。

rem配置

rem是css3新增的相对长度单位，随着屏幕宽度的动态变化，rem的值也会动态变化。打开App.vue，删除style里默认样式，在script里增加事件使字体随屏幕宽度动态变化。

1
2
3
4
5
6
7
8
9


document.addEventListener("DOMContentLoaded", setFontSize);
window.addEventListener('resize', setFontSize)
function setFontSize() {
    const html = document.querySelector("html");
    let fontSize = window.innerWidth / 10;
    <!-- 限制字体最大值 -->
    fontSize = fontSize > 50 ? 50 : fontSize;
    html.style.fontSize = fontSize + "px";
}

基本样式

在styles下面新建reset.scss，消除浏览器默认样式，将网上下载的样式重置代码拷贝进去，并设置

1
2
3
4
5
6


html,body{
    width:100%;
    height:100%;
    font-family: 'PingFangSC-Light','PingFang SC','STHeitiSC-Light',
    'Helvetica-Light','Arial','sans-serif';
}

创建global.scss规定整个站点的公共样式和方法，在main.js中引入import ‘@/assets/styles/global.scss’。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


@import 'reset';
$fontSize: 37.5;
<!-- px2rem将px转化为rem -->
@function px2rem($px) {
  @return ($px / $fontSize)+rem;
}
<!-- mixin定义后面要用的样式 -->
@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}