nuxt juejin project

introduzir

vuex - nuxt nuxt-juejin-project koa element-ui projeto de aprendizado usando Nuxt.js para imitar as axios . Todos os dados do projeto são sincronizados com o Nuggets, porque a interface é republicada pelo koa como a camada do meio (encontrar uma interface é realmente um trabalho cansado), redefinindo o roteamento e o processamento da interface parte dos dados da interface. Os principais dados da página são renderizados no servidor através asyncData . Ao escrever um projeto, usarei a configuração fornecida pelo Nuxt.js o máximo possível e alguns pontos técnicos (renderização do servidor, encaminhamento de interface, configuração de rota, verificação de permissões etc.). Projeto de renderização final do serviço.

O projeto foi feito pela Nuxt.js pela primeira vez, e alguns dos detalhes do processo podem não ser bons o suficiente. Se você quiser aprender, é recomendável ser usado para referência, espero não enganá -lo.

Dicas gentis

Após as pepitas reestruturadas em agosto de 2020, a versão antiga da interface foi fechada. O ramo principal é a versão antiga. (Status e operação relacionados ao usuário falham temporariamente, como mensagens do usuário, login, curtidas etc.)

Função

 - 登录/登出

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

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

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

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

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

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

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

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

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

- 消息
  - 用户消息

- 小册
  - 小册筛选（分类）

- i18n国际化

- 错误页
  - 404

- 交互相关
  - 点赞（文章、沸点）
  - 关注（作者、标签）

• Use o tempo de toque de peixes para atualizar ...

Descrição da estrutura do arquivo

Para entender rapidamente o projeto, a estrutura do arquivo do projeto é descrita aqui.

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

Captura de tela de alguns efeitos

• primeira página

• Detalhe

• procurar

• Ponto de ebulição

• tópico

Ativação do projeto

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

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

# 安装依赖
npm install

# 服务启动
npm run dev

Visite http: // localhost: 8000

Reabastecer

• A clonagem doméstica do Github será mais lenta, você pode escolher escolher entre codões em nuvem https://gitee.com/chanwahfung/nuxt-juejin-project.git.git.git.git

Licença

Mit