Vue2.5 实战微信读书媲美原生App的企业级web书城

epubjs 核心类介绍

Book
Rendition
Locations
Navigation
View Manager
EpubCFI
Theme
Spine
Section
Contents
Hook
Annotations

Vue CLI 3.0 环境搭建

卸载老版本 vue-cli：npm uninstall vue-cli -g
安装新版本：npm i @vue/cli -g
原型开发：npm i -g @vue/cli-service-global

关闭eslintrc.js 缩进校验

rules: {
    'indent': 'off'
}

项目技术难点分析

阅读器开发：分页算法、全文搜索算法、引入 web 字体、主题设计
离线存储机制设计：LocalStorage + IndexDB
实现各种复杂手势 + 交互动画，如何兼容手势 + 鼠标操作
利用 vuex + mixin 实现组件解耦 + 复用，大大精简代码量
利用 es6 优雅地实现数据结构变化
科大讯飞 web 在线语音合成 API 开发

生成字体图标

下载好 svg 图标后，登录 https://icomoon.io/app/#/select 点击 New Empty Set 选项，import to set 导入图标，全选然后 Generate Font，下载，是一个 zip 文件，解压，拷贝 fonts 文件夹和 style.css 文件。

安装 sass：npm i -D node-sass sass-loader node 升级的会导致上述npm 包产生兼容问题，需要卸载重装。

fonts.googleapis.com

设置 rem

document.addEventListener('DOMContentLoaded', () => {
    const html = document.querySelector('html')
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > 50 ? 50 : fontSize
    html.style.fontSize = fontSize + 'px'
})

global.scss

reset.css: https://meyerweb.com/eric/tools/css/reset/

@import './reset';
$ratio: 375 / 10;

@function px2rem($px) {
    @return $px / $ratio + rem;
}

模块化使用 vuex

store
--modules
----book.js
index.js

export default new Vuex.Store({
    modules: {
        book
    }
})

调试

https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md 远程调试工具：vue-remote-devtools

搭建 nginx 静态服务器

nginx.org 启动 nginx：sudo nginx 关闭 nginx：sudo nginx -s stop 重新加载（修改配置文件 nginx.conf 后）nginx：sudo nginx -s reload 检查语法：sudo nginx -t

动态路由

$route.params.fileName

// router.js
routes: [
    {
        path: '/ebook',
        component: () => import('./views/ebook/index.vue'),
        children: [
            {
                path: ':fileName',
                component: () => import()
            }
        ]
    }
]

手势操作

利用 touchstart 和 touchend 事件，完成手势事件，利用 event.changedTouches[0].clientX 判断滑动的左右方向，利用 event.timeStamp 控制触发时间限制。

vue 的 mixins 属性

vuex

mapGetters
mapActions

MrZWH / MrZWHblog