Vue.js项目实战

作者简介：

纪尧姆·周（Guillaume Chau）

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

译者简介：

周智勋

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

张伟杰

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

孔亚杰

一只后知后觉的“程序猿”，爱篮球、爱音乐、爱游戏，立志成为一名优秀的前端架构师。目前就职于上海...

(展开全部)

作者简介：

纪尧姆·周（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章　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
· · · · · · (收起)