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

目录

第 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

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang