nuxt-juejin-project
是一个使用 Nuxt.js
仿写掘金的学习项目,主要使用 :nuxt
+ koa
+ vuex
+ axios
+ element-ui
。该项目所有数据与掘金同步,因为接口都是通过 koa
作为中间层转发(找接口真是个累活
asyncData
在服务端渲染。在写项目时我会尽可能的使用 Nuxt.js
提供的配置以及一些技术点(服务端渲染、接口转发、路由配置、权限验证等),希望借此更全面的学习服务端渲染项目的流程。
该项目是我初次使用 Nuxt.js
制作的,可能部分流程细节不够好。如果你想学习的话,建议只是用来参考,希望不要误导你。
掘金在2020年8月份重构更新后,旧版接口已被关闭。master分支为旧版本,新版本我已放到apinew分支下,如果需要查看,请克隆apinew分支。
- 登录/登出
- 权限验证
- 登录状态验证
- 交互验证
- 首页
- 文章筛选(分类、热门、最新、热榜)
- 文章触底分页
- 作者榜模块
- 推荐小册模块
- 文章详情
- 正文
- 目录跳转
- 文章评论
- 文章分享
- 相关推荐
- 关于作者模块
- 相关文章模块
- 作者页
- 作者信息
- 文章筛选(热门、最新)
- 文章触底分页
- 个人成就模块
- 头像彩蛋��
- 搜索
- 类型筛选(综合、文章、标签、用户)
- 时间筛选(全部、一天内、一周内、三月内)
- 沸点
- 沸点筛选(推荐、热门、关注、分类)
- 沸点触底分页
- 沸点评论
- 沸点分享
- 大图预览
- 推荐沸点模块
- 关注的话题模块
- 话题
- 关注的话题、全部话题
- 文章筛选(热门、最新)
- 文章触底分页
- 话题详情模块
- 参与者模块
- 标签
- 标签详情
- 文章筛选(热门、最新、最热)
- 文章触底分页
- 标签管理
- 已关注标签、全部标签
- 消息
- 用户消息
- 小册
- 小册筛选(分类)
- 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 -b apinew https://github.com/ChanWahFung/nuxt-juejin-project.git
# 进入项目目录
cd nuxt-juejin-project
# 安装依赖
npm install
# 服务启动
npm run dev
前言 10月初有幸接到公司官网改版需求,要求采用服务端渲染模式对原网站进行seo优化。 由于团队一直使用的vue技术栈,所以我第一时间想到的就是采用vue 服务端渲染(SSR)来实现该需求,即能减少团队其他成员后期维护的成本,又能把现有其他项目封装好的内容稍微改改就能直接copy过来使用,大大节省了开发时间(除去ui中途调整,整体改造时间只花了2-3天)。 改造前后对比 1、原公司网站(改版前),
第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html。 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合
Nuxt 官方文档 简单来说,Nuxt就是基于Vue的一个应用框架,采用服务端渲染,让你的SPA应用(Vue)也可以拥有SEO 生命周期 众所周知,Vue的生命周期全都跑在客户端(浏览器),而Nuxt的生命周期有些在服务端(Node),客户端,甚至两边都在: 生命周期流程图, 红框内的是Nuxt的生命周期(运行在服务端),黄框内同时运行在服务端&&客户端上,绿框内则运行在客户端 实战经验 1. 红
Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。 SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器。 Nuxt.js是特点(优点): 基于 Vue.js 自动代码分层 服务端渲染 强大的路由功能,支持异步数据 静态文件服务 ES6/ES7 语法支持
后台管理系统 vue-admin 基于vue的nuxt.js 服务渲染框架的后台框架,使用了docker部署方式。 功能介绍 用户模块 登录注册 找回密码 邮箱激活 用户标签 用户分组 文章模块 增删改查 标签管理 消息模块 实时推送 IM聊天 权限模块 用户权限 操作日志 系统模块 任务队列 角色管理 权限分配 节点管理 其他模块 微信授权 Build Setup # install depen
5se7en.com nuxtjs+express+vue2.0+vuex搭建的服务端渲染个人网站项目. github项目地址: https://github.com/se7en-1992/5se7en.com 项目线上地址:https://5se7en.com/ 注意事项 node>=v8.0.0+ (nuxt1.0.0以上版本的node版本号必须大于v8.0.0否则启动的时候会报错) 若要测试
摘要: 后端渲染3大框架。 原文:如何选择正确的Node框架:Next, Nuxt, Nest? 作者:Random 简介 在上一篇文章中,我探讨了三种最流行的Node框架:Express、Koa和Hapi的区别、优点和缺点。在这篇文章中,我们将研究另外三种非常流行的框架之间的区别:Next、Nuxt和Nest。这三个框架都是服务器端渲染,它们分别与React、Vue和Angular(三个目前最流
1、按https://blog.csdn.net/weixin_41134409/article/details/89085756 描述方法引入,报错。经查找资料,是babel-plugin-import与nuxt不兼容。有人推荐通过babel-plugin-component 代替babel-plugin-import(https://juejin.im/post/5c8f77965188252
Nuxt-ssr是一个文章增删改查的SSR项目 Nuxt.js该项目是一个ssr结构完整的项目,适合新人练手使用,如果对您有帮助,请右上角给个star,鼓励一下,同时希望指正。也可以加 nuxt技术交流群,大家一起相互学习,相互成长。 用到的技术 Vue.js v2.0.0 Nuxt.js v1.0.0 Node.js v9.8.0 (必须>=8.0) Express.js v4.x MongoD
Laravel-Nuxt A Laravel-Nuxt starter project template. Features Nuxt 2 Laravel 8 SPA or SSR Socialite integration VueI18n + ESlint + Bootstrap 4 + Font Awesome 5 Login, register, email verification and
如果你打算用自己的中间件和 API 运行你的服务端的话,你可以以编程的形式将 Nuxt.js 集成到你原有的应用中去。 因为 Nuxt.js 基于 ES2015 编写,所以它的代码相对来说更有趣、更易读。它没用到任何的转译器,只依赖于 V8 内核中已经实现的功能。因此,Nuxt.js 需要 Node.js 4.0 或更高的运行环境。 你可以这样引入 Nuxt.js: const { Nuxt }
Get the latest Nuxt news to your inbox, curated by the core team and contributors.
Warning: this project has been deprecated laravel-nuxt was created to offer some sugar when working locally with Laravel+Nuxt, solving some cookie problems in the process. Today, it isn't necessary an
Nuxt.js具有完全模块化的架构,允许开发人员使用灵活的API扩展Nuxt Core的任何部分。 如果有兴趣开发自己的模块,请查看 Modules 教程 获取更多详细信息。 本节有助于熟悉Nuxt内部,并可以作为参考,在编写自己的模块时更好地理解它。 Core 这些类是Nuxt的核心,应该在运行时和构建时都存在。 Nuxt Nuxt Class 来源: core/nuxt.js Renderer