Vue.js前端开发基础与项目实战

第 1篇 基础准备篇
第 1章 关于前端开发你需要知道的事．． 02
1．1 网页开发的前世今生． 02
1．1．1 是否还记得曾经的前端开发 ． 02
1．1．2 大前端时代的来临． 03
1．2 MVC、MVP、MVVM 傻傻分不清楚．． 05
1．2．1 MVC 小解． 05
1．2．2 MVP 小解． 06
1．2．3 MVVM 小解 06
1．2．4 三者的区别和优劣． 08
1．3 工欲善其事，必先利其器 08
1．3．1 开发者的眼——Chrome 08
1．3．2 开发者的手——VS Code．． 10
1．3．3 开发者的心——Terminal． 11
1．4 小结 12
第 2章 关于Vue．js 的一些小事． 14
2．1 从安装开始 14
2．1．1 直接引入 14
2．1．2 脚手架的配置．． 15
2．1．3 脚手架的使用．． 16
2．2 Vue．js 初体验． 21
2．2．1 项目文件内容介绍． 21
2．2．2 必不可少的Helle World．． 23
2．2．3 经典的TodoList 25
2．3 了解一些特性． 31
2．3．1 新建实例 31
2．3．2 生命周期 32
2．3．3 模板语法． 34
2．3．4 计算属性与过滤器．． 34
2．3．5 样式的修改．． 36
2．3．6 条件与列表渲染． 40
2．3．7 事件的处理．． 43
2．3．8 双向绑定． 46
2．4 小结 49
第3章 组件详解．． 51
3．1 组件概念．． 51
3．1．1 什么是组件．． 51
3．1．2 为什么要使用组件．． 52
3．2 组件创建．． 53
3．2．1 组件基础． 53
3．2．2 组件注册． 55
3．3 组件通信．． 55
3．3．1 父组件与子组件通信 56
3．3．2 子组件与父组件通信 58
3．3．3 子组件之间的通信．． 59
3．4 插槽 60
3．5 特殊情况．． 62
3．6 小结 65
第4章 ES6 的日常使用 66
4．1 关于ES6 你需要知道的事 66
4．1．1 ES 的发展历史 66
4．1．2 ES6 和JS 的关系． 67
4．1．3 为什么要使用ES6 68
4．2 ES6 常用语法简介． 70
4．2．1 Demo 的分析．． 70
4．2．2 用户获取数据的方法 72
4．2．3 输出用户输入信息的方法．． 73
4．2．4 判断最喜欢地点的方法． 74
4．2．5 判断支出类型的方法 75
4．2．6 保存数据． 76
4．3 Babel 的支持．． 76
4．3．1 Babel 是什么． 76
4．3．2 Babel 文件配置．． 78
4．3．3 Babel 的实际调用 80
4．4 小结 81
第5章 项目的构建 82
5．1 前端项目构建——Webpack．． 82
5．1．1 Webpack 是什么．． 82
5．1．2 Webpack 的特点．． 83
5．1．3 Webpack 配置规范 83
5．1．4 Webpack 整体配置一览．． 87
5．1．5 Webpack 使用． 88
5．1．6 Webpack4．X 的新特性 89
5．2 前端常用插件的介绍． 90
5．2．1 Axios． 90
5．2．2 Element．． 93
5．2．3 Sass．． 97
5．2．4 Esl int．． 100
5．3 后端项目构建——Koa．． 102
5．3．1 为什么选择Koa． 102
5．3．2 构建Koa 项目．． 105
5．3．3 koa-router 的优化． 106
5．4 数据库——MySQL 108
5．4．1 MySQL 简介．． 108
5．4．2 MySQL 的安装 109
5．4．3 Sequelize 的使用．． 111
5．5 小结．． 114
第 2篇 项目实战篇
第6章 项目分析与设计． 118
6．1 我们要做一个什么项目． 118
6．2 实现哪些功能，需要哪些页面． 121
6．2．1 需求分析 121
6．2．2 页面设计 121
6．2．3 提取公用插件．． 123
6．3 路由的分配．． 123
6．3．1 一级路由的确定 123
6．3．2 二级路由的确定 124
6．4 数据库内容的确定．． 125
6．4．1 根据需求确定数据表结构． 125
6．4．2 主要字段的配置 126
6．5 小结．． 128
第7章 基础页面的开发． 129
7．1 主页的开发．． 129
7．1．1 页面主体header 框架开发 129
7．1．2 主页路由配置．． 131
7．1．3 主页header 剩余内容开发 132
7．1．4 第三方ICON 库的引入． 133
7．1．5 首页主体框架开发． 134
7．1．6 首页右侧侧边栏次组件开发．． 136
7．1．7 首页右侧侧边栏主组件开发．． 138
7．1．8 主页列表外内容效果展示． 140
7．1．9 内容列表表头开发． 140
7．1．10 模拟数据获取． 142
7．1．11 列表元素开发． 143
7．1．12 列表操作按钮开发 145
7．1．13 列表系列组件的调用． 147
7．1．14 首页列表效果展示 149
7．2 登录注册页面的开发 150
7．2．1 确定登录页背景框架．． 150
7．2．2 登录页静态内容 152
7．2．3 登录页表单验证等相关内容．． 154
7．2．4 登录页信息提示及整体效果．． 157
7．3 注册登录功能实现．． 158
7．3．1 数据表的确定．． 158
7．3．2 用户注册功能实现． 161
7．3．3 用户登录登出与信息存储． 164
7．4 小结．． 169
第8章 文章和问题的日常操作． 170
8．1 图片和富文本的处理 170
8．1．1 富文本插件的使用． 170
8．1．2 文章编辑页header 组件开发． 172
8．1．3 文章编辑页主组件开发 174
8．1．4 文章编辑页路由注册与效果展示． 175
8．1．5 文章编辑页发布文章方法． 176
8．1．6 图片的上传接口开发．． 177
8．1．7 图片上传前端开发． 179
8．1．8 富文本组件中的图片上传． 180
8．2 文章的增、删、改、查． 182
8．2．1 文章新增页面的跳转．． 182
8．2．2 文章相关数据表配置．． 182
8．2．3 文章增加删除接口的开发． 185
8．2．4 文章查询更新接口开发 188
8．2．5 文章列表开发．． 190
8．2．6 文章详情页面开发． 192
8．2．7 文章跳转链接修改． 195
8．3 问题的增、改 195
8．3．1 问题增加更新前端模块开发．． 196
8．3．2 问题增加修改与header 部分修改 198
8．3．3 问题数据表新建 200
8．3．4 问题增加更新接口开发 201
8．4 小结．． 203
第9章 评论、回答和状态的操作．． 204
9．1 问题回答的相关操作 204
9．1．1 问题详情前端页面开发 204
9．1．2 问题详情前端逻辑开发 207
9．1．3 新建回答数据表 210
9．1．4 回答查找、删除和更新接口．． 211
9．1．5 问题答案的查询接口．． 214
9．1．6 问题回答的前端展示．． 216
9．2 评论的相关操作． 219
9．2．1 评论新建前端开发． 219
9．2．2 新建评论数据表 222
9．2．3 评论新建查找删除接口开发．． 223
9．2．4 新建评论效果展示． 226
9．2．5 评论展示前端开发． 227
9．2．6 评论功能组件开发． 228
9．2．7 评论功能组件调用． 231
9．2．8 一级评论效果展示． 233
9．2．9 评论列表的循环调用．． 234
9．2．10 多级评论效果展示 236
9．2．11 评论个数展示． 236
9．3 状态的相关操作． 238
9．3．1 状态的更新． 238
9．3．2 状态中特殊情况的处理 242
9．4 小结．． 243
第 10章 个人主页的开发． 245
10．1 个人信息的修改 245
10．1．1 个人信息页面的新建． 245
10．1．2 个人信息页面查看修改接口开发 248
10．1．3 个人信息页面的跳转． 249
10．1．4 个人座右铭的修改 252
10．1．5 用户头像修改． 254
10．2 个人主页列表开发． 258
10．2．1 列表框架的构建．． 258
10．2．2 作者回答查询接口开发．． 261
10．2．3 作者回答查询接口调用．． 262
10．2．4 作者回答删除功能开发．． 264
10．2．5 作者回答编辑功能开发．． 267
10．2．6 作者文章的查看功能开发 270
10．2．7 作者文章的删除功能开发 272
10．2．8 作者文章的编辑功能开发 273
10．2．9 提问的列表 275
10．3 小结． 278
第 11章 项目的部署．． 279
11．1 服务器的购买与配置．． 279
11．2 服务器的连接与配置．． 280
11．2．1 服务器连接的两种方法．． 281
11．2．2 服务器环境安装．． 282
11．2．3 服务器数据库详细配置．． 283
11．2．4 服务器项目文件夹创建．． 286
11．3 服务部署 286
11．3．1 前端项目部署． 286
11．3．2 后端项目部署． 289
11．4 小结． 291
第 12章 总结．． 293
12．1 第 1 篇内容回顾 293
12．2 第 2 篇内容回顾 294
12．3 小结． 295