😉我用 Nuxt.js 仿了个掘金

前言

首先确定是要夸夸掘金啦，最开始从 CSDN 到 博客园 再到 掘金，我的感受掘金的技术氛围很是的nice，真是个宝藏社区👏。技术文章大多之前端为主，对前端开发者很是友好，质量也是歪瑞古的。学习是不可能不学习的，这辈子都不可能不学习的，只有敲敲代码复制粘贴才能维持得了生活这样子，进到这里处处都是大佬，沸点骚话又好听，呜哟~ 超喜欢这里的，哈哈哈😀

说实话，我绝大多数的学习动力还真是掘金带来，不论是文章仍是小册都能充实到本身，还有基本天天早上坐地铁会刷下掘金，而后触及到个人知识盲区，而后就是 怀疑人生 动力满满的一天（不知道有没有和我同样的😅）。因此，当你在掘金看到的越多，你就会发现本身越 废物 眇小（来一波毒鸡汤，时刻提醒本身要保持学习）。

废话很少说了，进入正题~

介绍

nuxt-juejin-project 是一个使用 Nuxt.js 仿写掘金的学习项目，主要使用 ：nuxt + koa + vuex + axios + element-ui。该项目全部数据与掘金同步，由于接口都是经过 koa 做为中间层转发（找接口真是个累活😅），从新定义接口路由以及对部分接口数据作处理。页面主要数据请求经过 asyncData 在服务端进行拼接并返回前端渲染。在写项目时我会尽量的使用 Nuxt.js 提供的配置以及一些技术点（服务端渲染、接口转发、路由配置、权限验证等），但愿借此更全面的学习服务端渲染项目的流程。

该项目是我初次使用 Nuxt.js 制做的，可能部分流程细节不够好。若是你想学习的话，建议只是用来参考，但愿不要误导你。

功能

- 登陆/登出

- 权限验证
  - 登陆状态验证
  - 交互验证

- 首页
  - 文章筛选（分类、热门、最新、热榜）
  - 文章触底分页
  - 做者榜模块
  - 推荐小册模块

- 文章详情
  - 正文
  - 目录跳转
  - 文章评论
  - 文章分享
  - 相关推荐
  - 关于做者模块
  - 相关文章模块

- 做者页
  - 做者信息
  - 文章筛选（热门、最新）
  - 文章触底分页
  - 我的成就模块
  - 头像彩蛋😛

- 搜索
  - 类型筛选（综合、文章、标签、用户）
  - 时间筛选（所有、一天内、一周内、三月内）

- 沸点
  - 沸点筛选（推荐、热门、关注、分类）
  - 沸点触底分页
  - 沸点评论
  - 沸点分享
  - 大图预览
  - 推荐沸点模块
  - 关注的话题模块

- 话题
  - 关注的话题、所有话题
  - 文章筛选（热门、最新）
  - 文章触底分页
  - 话题详情模块
  - 参与者模块

- 标签
  - 标签详情 
  - 文章筛选（热门、最新、最热）
  - 文章触底分页

- 标签管理
  - 已关注标签、所有标签

- 消息
  - 用户消息

- 小册
  - 小册筛选（分类）
  
 - i18n国际化

- 错误页
  - 404

- 交互相关
  - 点赞（文章、沸点）
  - 关注（做者、标签）
复制代码

😶利用摸鱼时间更新中...

文件结构描述

为了快速的了解项目，在此对项目文件结构作出描述。

├─assets  // 存放静态资源（如：scss）
│
├─layouts // 页面主要布局、自定义错误页面
│
├─components  // 页面组件
│ ├─business  // 业务组件
│ ├─common    // 公用组件
│
├─middleware  // 应用中间件（如：权限验证）
│
├─mixins      // 公用逻辑抽离（如：触底事件）
│
├─pages       // 页面视图
│
├─plugins     // 插件（如：axios、api）
│
├─server      // 服务端
│ ├─middleware  // 服务端使用的中间件
│ ├─request     // 请求方法封装
│ ├─routes      // 接口转发
│
├─store       // vuex
│
├─utils       // 工具方法
│
│nuxt.config.js   // Nuxt.js应用配置
复制代码

部分效果截图

• 首页

• 详情

• 搜索

• 沸点

• 话题

项目启动

# 克隆项目
git clone https://github.com/ChanWahFung/nuxt-juejin-project.git

# 进入项目目录
cd nuxt-juejin-project

# 安装依赖
npm install

# 服务启动
npm run dev
复制代码

访问 http://localhost:8000

国内 github 克隆会比较慢，你能够选择从码云克隆

git clone https://gitee.com/ChanWahFung/nuxt-juejin-project.git
复制代码

写在最后

项目最开始是3月初就创建，基本都是在看文档写小例子熟悉api（中间停了一段时间）。本来只是想大概了解一下 Nuxt.js，没想到要作一个项目出来。而后某一天，忽然想起一句话：学了不用就是白给。恰好这段时间公司项目不是很紧，因而在3月底便开始用 Nuxt 仿掘金。项目基本都是用上班摸鱼时间还有下班时间慢慢作的，3月底到如今算下来快一个半月，其实学 Nuxt.js 的过程不仅仅只是学会这一门框架，其中还会发现本身在其余方面的不足，有时候作到一半会去补充这方面的知识。因此在学习新知识时，仍是要更多的学习和作个实际的东西出来，而不是浅尝即止。但愿你们在学习时要有种求知若渴的心态~

笔记戳这里，若是以为项目还能够，欢迎star~✨，项目地址：github.com/ChanWahFung…