ZhihuDaily

1. Процесс установки и введение проекта

Установить

Согласно реакции восторженных людей,

 npm install
npm run serve

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

Этот проект повторяется на основе содержания iOS -стороны Zhihu Daily с апреля по май 2022 года. Он предназначен только для ссылки на обучение и не используется для получения прибыли.

2. Логика страницы

Он разделен на две части: страницы и компоненты

2.1 Index.vue

Эта страница является домашней страницей, а адрес «/» в компоненте маршрутизации. Содержит Headcontent.vue (top) Swipe.vue (Список новостей) Newslist.vue (Список новостей)

Headcontent.vue Нажмите на аватар, чтобы прыгнуть, чтобы смахиваться. Vue (боковая панель)

Свиде .​

2.2 Свилет. Vue

Эта страница - боковая панель, вы можете ввести мои фавориты collect.vue

2.3 Collect.vue

Эта страница является фаворитом, которая содержит несколько любимых содержимого. Нажмите, чтобы ввести newsdetail.vue (страница новостей)

2.4 Newsdetail.Vue

Доступ к нему можно получить различными способами, включая Newsmenu.vue (Function Bar) и Share.vue (Share Page)

Newsmenu.Vue содержит четыре функции: лайки, коллекции, комментарии и обмен. Комментарии будут подскочить к комментарии. Vue Share и Trigger Share.vue

2.5 Comment.vue

Страница комментариев, включая длинные комментарии и короткие комментарии, нажмите внизу, чтобы перейти на страницу writecomment.vue.

2.6 WriteComment.Vue

Вы можете написать комментарии на странице writecomment.vue , нажмите «Сообщение» и перейти к комментарии.vue.

3. Сортировка функциональной точки

3.1 Headcontent.vue

Отображение дат, отображение аватаров и страниц прыжков, без труда

3.2 Свилет. Vue

Рукописные диаграммы карусели осознают автоматическое (переключение каждые 4s) и переключение влево и справа

3.3 Newslist.vue

Список новостей, скидка вниз покажет контент новостей за последние несколько дней, используя бесконечную компонент Element-UI.

3.4 Соберите. VUE

Нажмите кнопку «Избранное» на странице, и соответствующий контент новостей появится на моей странице «Избранное», обновляется, не проиграв

3.5 Newsmenu.Vue

Вы можете нажать, чтобы любить, собирать и делиться комментариями, и не терять их после освежения.

3.6 Share.vue

После нажатия появляется страница обмена, а фон, стоящий за ней, становится серым. Нажмите на фон или нажмите Cancel, и страница обмена исчезает.

3.7 Comment.vue

Показать комментарии, например, комментарии, обновить и выходить без исчезновения

3.8 WriteComment.Vue

1. Не увеличитесь после нажатия на мобильный телефон
2. Только когда есть контент, вы можете прокомментировать и публиковать. Когда есть контент комментариев, цвет кнопки пост изменится.
3. После публикации вернитесь к комментарии.

4. Реализация

Выберите некоторые более важные реализации для объяснения

4.1 Newslist.vue

Используйте V-Infinite-Scroll в Element-UI, чтобы спуститься вниз, чтобы вызвать новости о датах прошлых, чтобы получить новости о датах прошлых.

4.2 Newsmenu.vue

...

5. Последующие мысли

На основании существующих проектов добавьте функции бэкэнд и сделайте это после того, как вы выучили node.js

5.1 Добавлена ​​функция входа в систему

5.2 Используйте базу данных для хранения пользовательских лайков и коллекций

5.3 ...