Nuxt.js 综合案例-基础实现思路

1,179 阅读1分钟

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
  • 通过客户端渲染展示评论列表