笔记来源：拉勾教育 大前端高薪训练营
阅读建议：建议通过左侧导航栏进行阅读
- 案例名称：RealWorld
- 一个开源的学习项目，目的就是帮助开发者快速学习新技能
- GitHub仓库：https://github.com/gothinkster/realworld
- 在线示例：https://demo.realworld.io/#/
- 接口文档：https://github.com/gothinkster/realworld/tree/master/api
- 页面模板：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md
- Vue.js 使用经验
- Nuxt.js 基础
- Node.js、webpack 相关使用经验
- 掌握使用 Nuxt.js 开发同构渲染应用
- 增强 Vue.js 实践能力
- 掌握同构渲染应用中常见的功能处理
- 用户状态管理
- 页面访问权限处理
- SEO 优化
- …
- 掌握同构渲染应用的发布与部署
创建项目
-
准备工作
-
在 中添加启动脚本：
-
创建 ：
-
启动服务：
在浏览器中访问 http://localhost:3000/ 测试。
导入样式资源
-
配置模板文件，：
文件需要依赖其他的字体等文件，因此使用 进行地址转换；
文件不需要依赖其他的文件，因此，直接下载文件即可
配置布局组件
将公共部分提取成公共组件。
导入登录注册
导入剩余页面
用户设置页面
创建 / 编辑文章
文章详情页面
导入用户页面
手动配置路由
处理顶部导航链接
-
，将所有 改写为
处理导航链接高亮
-
，配置路由链接高亮
封装请求模块
-
安装 axios：
-
创建 文件，封装请求模块
封装请求方法
-
创建 文件，封装****相关的请求方法
基本用户登录注册
实现基本登录功能
表单验证
错误处理
用户注册
-
，调用接口，输入登录信息，完成基本登录注册功能
存储用户登录状态
存储原因
- 需要根据登录状态判断页面的显示内容；
- 某些页面只有登录后，才可以访问；
- …
解析存储登录状态实现流程
-
官网地址：https://zh.nuxtjs.org/faq/auth-external-jwt/#login-page
-
官网示例，代码如下：
注意：
该函数只在每个服务器端呈现中运行。所以我们用它来改变存储中的会话浏览器cookie。我们可以使用并使用.
存储登录状态，并将其持久化
-
初始化容器数据
注意：
1， 中已经集成了 ，无需手动载入；
2， 目录的名称是 固定的，不可修改的；
3，Nuxt.js 在运行过程中，查找到 目录，会自动加载 目录中的容器模块。
-
登录成功，将用户信息存入容器
-
将登录状态持久化到 中
启动 命令行，安装
在 中，按需加载 ，即只在 客户端 中使用
在 中，将登录状态存储到 Cookie 中
-
从 中获取并初始化用户登录状态
安装
在 中，定义 函数，初始化容器数据，传递数据给客户端使用
处理页面访问权限
-
中间件简介
1，官网地址：https://zh.nuxtjs.org/docs/2.x/directory-structure/middleware#router-middleware
2，基本概述
- 中间件允许定义可以在呈现页面或一组页面（布局）之前运行的自定义函数。
- 共享中间件应该放在目录。文件名将是中间件的名称(将会是中间件），也可以通过直接使用函数来定义特定于页面的中间件，请参阅匿名中间件 .
- 中间件接收 context 作为第一个参数。
在通用模式下， 将在服务器端（第一次向Nuxt应用程序请求时，例如直接访问应用程序或刷新页面时）调用一次，在导航到其他路由时在客户端调用一次。与，在这两种情况下都将在客户端调用中间件。
中间件将按以下顺序串联执行：
- （按文件中的顺序）
- 匹配的布局
- 匹配的页面
-
基本分类
-
路由器中间件
中间件可以是异步的。要执行此操作，返回 或者使用 。
那么，在你的，使用钥匙
现在每次路由更改都将调用中间件。
您也可以将中间件（甚至多个）添加到特定的布局或页面。
-
命名中间件
可以通过在目录中，文件名将是中间件名称。
-
匿名中间件
如果只需要为特定页面使用中间件，可以直接为其使用函数（或函数数组）：
-
-
页面访问权限实现过程
在需要判断登录权限的页面中配置使用中间件
展示公共文章列表
- 接口文档：https://github.com/gothinkster/realworld/tree/master/api#list-articles
封装请求方法
获取数据
-
在 中，请求接口，获取数据
模板绑定
-
在 中，循环渲染数据，实现模板动态绑定
公共文章列表分页
处理分页参数
-
，访问接口时，传入每次访问的文章数量 和 数据的偏移量
页码处理
-
在 中，书写分页模板
- 1，使用计算属性计算总页码
- 2，遍历生成页码列表
- 3，设置导航链接
- 4，响应 query 参数的变化
官网地址：https://zh.nuxtjs.org/docs/2.x/components-glossary/pages-watchquery/
展示文章标签列表
封装请求方法
模板绑定
优化并行异步任务
处理首页的导航栏
-
，封装用户关注文章列表的请求方法
统一设置用户 Token
添加请求拦截器
-
在整个应用程序中使用函数或值时，使用插件机制在 中注入
使用插件，注入 context
-
官网地址：https://zh.nuxtjs.org/docs/2.x/directory-structure/plugins/
-
在 中，注册插件
注意:
-
将原来 目录中文件引入的 方法，改为如下代码:
文章发布时间格式化
-
GitHub 地址: https://github.com/iamkun/dayjs
-
使用 模块，安装
-
, 封装 插件
-
, 注册插件
-
, 使用过滤器
对文章进行点赞操作
封装请求方法
绑定点击事件
展示基本信息
封装请求方法
获取数据
模板页面
Markdown 转为 HTML
-
GitHub 地址: https://github.com/markdown-it/markdown-it
-
使用 模块，安装
-
, 把 markdown 格式的数据转换成 HTML
展示文章作者相关信息
-
. 提取公共组件，渲染文章作者相关信息
-
，父组件引入子组件
设置页面 meta 优化 SEO
-
官网地址: https://zh.nuxtjs.org/docs/2.x/components-glossary/pages-head/
展示评论列表
-
，提取公共组件，通过客户端渲染展示评论列表