😉我用 Nuxt.js 仿了个掘金

前言

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

说实话,我绝大多数的学习动力还真是掘金带来,不管是文章还是小册都能充实到自己,还有基本每天早上坐地铁会刷下掘金,然后触及到我的知识盲区,然后就是 怀疑人生 动力满满的一天(不知道有没有和我一样的😅)。所以,当你在掘金看到的越多,你就会发现自己越 废物 渺小(来一波毒鸡汤,时刻提醒自己要保持学习)。

废话不多说了,进入正题~

介绍

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

该项目是我初次使用 Nuxt.js 制作的,可能部分流程细节不够好。如果你想学习的话,建议只是用来参考,希望不要误导你。

功能
- 登录/登出

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

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

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

- 作者页
  - 作者信息
  - 文章筛选(热门、最新)
  - 文章触底分页
  - 个人成就模块
  - 头像彩蛋😛

- 搜索
  - 类型筛选(综合、文章、标签、用户)
  - 时间筛选(全部、一天内、一周内、三月内)

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

- 话题
  - 关注的话题、全部话题
  - 文章筛选(热门、最新)
  - 文章触底分页
  - 话题详情模块
  - 参与者模块

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

- 标签管理
  - 已关注标签、全部标签

- 消息
  - 用户消息

- 小册
  - 小册筛选(分类)

- 错误页
  - 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 克隆会比较慢,你可以选择从码云克隆 gitee.com/ChanWahFung…

写在最后

项目最开始是3月初就建立,基本都是在看文档写小例子熟悉api(中间停了一段时间)。原本只是想大概了解一下 Nuxt.js,没想到要做一个项目出来。然后某一天,突然想起一句话:学了不用就是白给。刚好这段时间公司项目不是很紧,于是在3月底便开始用 Nuxt 仿掘金。项目基本都是用上班摸鱼时间还有下班时间慢慢做的,3月底到现在算下来快一个半月,其实学 Nuxt.js 的过程不单单只是学会这一门框架,其中还会发现自己在其他方面的不足,有时候做到一半会去补充这方面的知识。所以在学习新知识时,还是要更多的学习和做个实际的东西出来,而不是浅尝即止。希望大家在学习时要有种求知若渴的心态~

如果觉得项目还可以,欢迎star~✨

原文链接:juejin.im

上一篇:关于flex-shrink计算:再深入一点点
下一篇:webpack+vue学习一:配置webpack(分离开发和生产环境),并实现vue页面输出

相关推荐

  • 🚀 Nuxt 2即将来临!Oh yeah!

    原文出处 🚀 Nuxt 2 is coming! Oh yeah! – Nuxt.js – Medium 1.4.0发布后仅仅25天,就又迎来了Nuxt2。

    2 年前
  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    4 个月前
  • 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

    自2019年元旦🙋Hanjst汉吉斯特 模板语言及其编译引擎发布,已经过去一年多了。 这期间随着 🙋Hanjst汉吉斯特 的推广应用,我们也陆续发布了如下一些更新内容: 🛠️Hanjst/汉吉...

    5 个月前
  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    4 个月前
  • 😀一个原生js弹幕库

    danmujs 😀一个原生js弹幕库,基于 CSS3 Animation 地址、核心代码 本项目基于 rc-bullets,项目约70%的代码基于rc-bullets,首先要感谢这个项目的作者...

    7 个月前
  • 🕵️‍♀️由原型到JS中的“模拟类”

    讲述了有关 JavaScript 中原型相关知识,又引出了 JavaScript 中的**“类“**究竟是什么?,以及一系列相关问题。 一、前置知识 1、JavaScript 的面向对象(OOP) ​...

    6 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Github,欢迎 Star,一起接水💧 作为一个在互联网公司面一次拿一次 Offer 的面霸,打败了无...

    6 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ 诶呀,口水流出来了。

    5 个月前
  • (干货👍)从详细操作js数组到浅析v8中array.js

    前言 最近在写面试编程题,经常用到数组,经常想偷个懒,用它提供的方法,奈何还是对数组方法使用不熟练,导致写了很多的垃圾代码,很多地方稍加修改的话肯定变得简洁高效优雅👊 所以✍这篇文章本着了解一下Ja...

    3 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包安装,二到淘宝cpm镜像查看cpm镜像命令:npm install -g cnpm --registry=http...

    1 年前

官方社区

扫码加入 JavaScript 社区