Nuxt.js 综合案例
gothinkster/realworld 一个功能完整的web示例程序,包含注册登录、标签、分类、文章发布、评论等功能。
本项目实现代码已上传至 github.com/no-pear/rea… ,需要者自取
1)案例相关资源
2)创建项目
- mkdir realworld-nuxtjs
- npm init -y
- npm i nuxt
- 配置启动脚本
- 创建 pages 目录
3)导入页面模板
- 导入样式资源
- 配置布局组件
- 配置页面组件
4)登录/注册
- 封装请求方法
- 登录/注册 表单验证
- 登录/注册 错误处理
- 用户注册
- 登录状态存储到容器中
- 登录状态持久化
- 处理导航栏链接展示状态
- 处理页面访问权限
5)首页
- 展示公共文章列表
- 列表分页-分页参数的使用
- 列表分页-页码处理
- 展示文章标签列表
- 处理标签列表链接和数据
- 处理文章列表导航栏-展示状态、标签高亮及链接
- 展示用户关注的文章列表
- 统一设置用 token
- 文章发布时间格式化处理
- 文章点赞
6)文章详情
- 展示基本信息
- 把 Markdown 转为 HTML
- 展示文章作者相关信息
- 设置页面 meta 优化 SEO
- 通过客户端渲染展示评论列表