Vue.js项目实战

本书基于6个项目来引导读者深入理解Vue.js。书中首先介绍Vue的基础知识，并使用指令和丰富的用户体验创建D一个Web应用；随后通过创建基于浏览器的游戏来介绍动画和交互性；然后通过可用的工具和预处理器讲解如何使用插件创建多页面应用，并为应用创建高效、高性能的组件；接下来创建一个在线商店并对其进行优化；zui后将Vue与实时库Meteor集成，创建一个显示实时数据的仪表盘。

【作者简介】
纪尧姆·周（Guillaume Chau）

Vue.js核心团队成员、Apollo GraphQL贡献者、Livestorm公司前端工程师。他分别将Vue.js与Meteor和Apollo GraphQL集成（vue-meteor和vue-apollo），帮助开发人员构建高交互性和实时的Web应用程序，还通过vue-virtual-scroller、vue-supply等工具为开源社区持续做出贡献。

【译者简介】
周智勋

旅居昆明，从事IT行业10余载，会写一些代码。闲时跑步打球，写写博客：破船之家。

张伟杰

不会跳舞的产品经理不是一个好程序员。爱跳舞、爱数码、爱技术，文艺青年的外表，技术宅男的内心。一个时常打破他人认知、无法被定义的人。

孔亚杰

一只后知后觉的“程序猿”，爱篮球、爱音乐、爱游戏，立志成为一名优秀的前端架构师。目前就职于上海一家人工智能猎头招聘平台。

李骏

软件工程师，有多年手机游戏和Web前端开发经验，现就职于北京一家科技公司。

适读人群 ：本书适合Vue初学者、开发者，以及对Vue感兴趣的前端开发人员阅读。
Vue易用、灵活、速度快，为构建完整的现代Web应用提供了所需的所有功能，其渐进式的特点也让开发者能够轻松上手，推出后迅速得到了前端开发人员的青睐。

本书由Vue.js核心团队成员纪尧姆·周（Guillaume Chau）执笔，通过从头构建6个真实的Web应用，带领读者掌握Vue.js开发，将动画、路由、状态管理、服务端渲染和国际化等技巧提升到一个新的水平。

·用Webpack构建工具和官方脚手架工具vue-cli搭建完整的Vue.js项目
·用指令编写自动更新的模板，创建动态Web应用
·用可复用、可维护的组件构建应用
·借助动画创造令人愉悦的用户体验
·用构建工具和预处理器搭建大型专业应用
·用Vue.js官方路由库创建多页面应用
·将非Vue.js元素集成到应用中
·用官方状态管理库来预防错误
·用服务端渲染和国际化来优化应用性能，实现更好的搜索引擎优化
·利用全栈框架Meteor的实时处理功能

第 1章 Vue开发入门 1
1．1 为什么需要另外一个前端框架 1
1．1．1 一个有发展前景的项目 2
1．1．2 兼容性要求 2
1．2 一分钟设置 3
1．3 创建一个应用 3
1．4 借助模板实现DOM的动态性 6
1．4．1 文本显示 6
1．4．2 利用指令添加基本的交互 7
1．5 小结 8
第 2章 项目1：Markdown笔记本 9
2．1 一个基本的笔记编辑器 10
2．1．1 项目设置 10
2．1．2 笔记编辑器 11
2．1．3 预览面板 12
2．1．4 保存笔记 15
2．1．5 加载已保存的笔记 18
2．2 多条笔记 20
2．2．1 笔记列表 20
2．2．2 选中一条笔记 25
2．2．3 笔记工具栏 32
2．2．4 状态栏 36
2．3 小结 40
第3章 项目2：城堡决斗游戏 41
3．1 游戏规则 41
3．2 项目设置 44
3．3 暴风雨前的平静 45
3．3．1 模板选项 45
3．3．2 应用的state 45
3．3．3 万能的组件 47
3．4 构建用户界面 48
3．4．1 第 一个组件：顶栏 48
3．4．2 显示卡牌 52
3．4．3 手牌 57
3．4．4 浮层 68
3．5 游戏世界和场景 75
3．5．1 城堡 75
3．5．2 城堡旗帜 77
3．5．3 云的动画 82
3．6 游戏玩法 85
3．6．1 抽取卡牌 85
3．6．2 出牌 86
3．6．3 下一回合 90
3．7 小结 92
第4章 高级项目设置 93
4．1 设置开发环境 93
4．1．1 安装官方命令行工具vue-cli 93
4．1．2 代码编辑器 94
4．2 第 一个完整的Vue应用 94
4．2．1 项目脚手架 94
4．2．2 创建应用 95
4．2．3 渲染函数 96
4．2．4 配置Babel 97
4．2．5 更新依赖 98
4．2．6 为生产构建 99
4．3 单文件组件 100
4．3．1 模板 101
4．3．2 脚本 102
4．3．3 样式 104
4．3．4 组件内的组件 106
4．4 小结 108
第5章 项目3：支持中心 109
5．1 通用应用结构 109
5．1．1 项目设置 109
5．1．2 路由和页面 110
5．2 FAQ——使用API 119
5．2．1 服务器设置 119
5．2．2 使用fetch 119
5．2．3 用自己的插件扩展Vue 124
5．2．4 使用mixin复用代码 126
5．3 支持工单 132
5．3．1 用户认证 132
5．3．2 显示和增加工单 152
5．3．3 高级路由特性 164
5．4 小结 171
第6章 项目4：博客地图 172
6．1 Google认证和状态管理 173
6．1．1 项目设置 173
6．1．2 使用Vuex进行状态管理 177
6．1．3 用户状态 187
6．2 嵌入Google地图 193
6．2．1 安装 193
6．2．2 添加地图 194
6．2．3 将BlogMap连接到store 196
6．3 博客和评论 201
6．3．1 在store中添加博客模块 201
6．3．2 渲染函数和JSX 202
6．3．3 创建一篇博客 210
6．3．4 获取博客列表 217
6．3．5 选中博客 222
6．4 小结 231
第7章 项目5：在线商店以及扩展 232
7．1 高级开发流程 232
7．1．1 项目设置 233
7．1．2 使用PostCSS为CSS自动添加前缀 235
7．1．3 通过ESLint提升代码质量和风格 236
7．1．4 Jest单元测试 240
7．2 补充话题 245
7．2．1 国际化和代码拆分 245
7．2．2 服务端渲染 250
7．2．3 生产环境构建 260
7．3 小结 263
第8章 项目6：使用Meteor开发实时仪表盘 264
8．1 项目设置 265
8．1．1 什么是Meteor 265
8．1．2 安装Meteor 265
8．1．3 创建项目 266
8．1．4 第 一个Vue Meteor应用 266
8．1．5 路由 268
8．2 产品测量记录 269
8．2．1 集成Meteor集合 269
8．2．2 设置数据 269
8．2．3 模拟测量记录 270
8．3 仪表盘和报告 272
8．3．1 进度条库 272
8．3．2 Meteor发布 272
8．3．3 创建仪表盘组件 273
8．4 小结 277