😉 Я использовал Nuxt.js для имитации самородка

Nuxt.js

предисловие

Прежде всего, мы должны похвалить Nuggets.В начале, от CSDN до Blog Garden и Nuggets, я лично чувствую, что техническая атмосфера Nuggets очень приятная, это действительно сообщество сокровищ 👏. Большинство технических статей ориентированы на фронтенд, очень дружелюбны к фронтенд разработчикам, да и качество тоже кривое. Не учиться невозможно, и невозможно не учиться в этой жизни. Только набрав и скопировав и вставив код, мы можем поддерживать такую ​​жизнь. Когда мы сюда заходим, повсюду большие парни. Вот, хахаха 😀

Честно говоря, большая часть моей учебной мотивации действительно связана с Наггетсами, будь то статья или буклет, я могу обогатить себя, и в основном каждое утро я езжу на метро, ​​чтобы почистить Наггетс, а затем прикасаюсь к слепому пятну своих знаний. , Тогда естьсомневаюсь в жизниДень, полный мотивации (не знаю, есть ли такие, как я 😅). Итак, чем больше вы видите в Наггетс, тем больше вы находите себянапрасно тратитьКрошечный (приходите с волной ядовитого куриного супа, всегда напоминайте себе продолжать учиться).

Не много ерунды, давайте к делу~

представлять

nuxt-juejin-projectэто использованиеNuxt.jsЧтобы имитировать учебный проект Nuggets, в основном используйте:nuxt + koa + vuex + axios + element-ui. Все данные этого проекта синхронизируются с Nuggets, т.к. интерфейс через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

напиши в конце

Проект был создан в начале марта, в основном чтение документации и написание небольших примеров для ознакомления с API (на некоторое время остановился). Изначально я просто хотел получить общее представление о Nuxt.js, но не собирался заниматься проектом. И вот однажды я вдруг вспомнил предложение: Если тебе не нужно учиться, ты отдашь это бесплатно. Так получилось, что проект компании в это время был не очень плотным, поэтому в конце марта Nuxt начал подражать Nuggets. Проект в основном делается медленно, используя время, чтобы порыбачить при выходе с работы и время, чтобы уйти с работы.Это почти полтора месяца с конца марта по настоящее время.По сути, процесс изучения Nuxt.js это не только изучение этого фреймворка, но и нахождение себя в Недостаточности в других аспектах, иногда половина его будет дополнять эти знания. Поэтому, осваивая новые знания, все же необходимо больше учиться и делать что-то практическое, а не просто пробовать на вкус. Я надеюсь, что у всех вас есть жажда знаний, когда вы учитесь~

примечание штампздесь, если вы считаете, что с проектом все в порядке, добро пожаловать в звездочку~✨, адрес проекта:GitHub.com/Chan wah fun G…

Категории