Vue.js 项目实战

🌙

手机阅读

本文目录结构

Vue.js 项目实战

编辑推荐

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

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

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

内容简介

本书基于 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 前端开发经验，现就职于北京一家科技公司。

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