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

[MrZWH]

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

设置环境变量