HyrKGsWebsite

ВведениеПредставить

Мой личный проект начального обучения с нулевой базой, обучение, основанное на задачах! Время от времени обновляется, обычно мне нужно работать и учиться.

☞Предварительный просмотр: http://hyrkg.cn

Добро пожаловать в верхний правый угол ↗️ ЗВЕЗДИТЕ мой проект, давайте учиться и добиваться прогресса вместе!

? Мой план

• Весенний бэкэнд
• Войдите в систему (предположительно будет использоваться oauth2)
  • localStorage и sessionStorage
• Встроить VitePress на мой сайт (кажется сложным)
• Большие планы! ?Круглый стол
  • Внешний интерфейс
  • Длинная ссылка, может быть, WebSocket?
• vuex, я чувствую, что мне все еще нужно сначала это выучить.

? Завершенный! Проверенный список:

• (css) Сделать интерфейс полностью совместимым с ночным режимом.
• (vue-TransitionGroup) Пусть на моей игровой площадке будет крутая анимация
• (vue, js) позволяет бесконечно добавлять или удалять компоненты. Перечисляйте загружаемые компоненты вместо того, чтобы писать непосредственно в HTML!
• (vue, css) Мой собственный компонент гибкого контейнера!
• «Как приятно иметь страницу, посвященную обучению и игре. ?Детская площадка рождается!
• (vue-router) Персональная домашняя страница не требует панели навигации и требует одностраничного эффекта. Используйте дочерние элементы в маршрутах для реализации одностраничных и общих функций страницы.
• (vue-router) Реализуйте функцию навигации и сделайте панель навигации более полезной!
• (vue, js) Попробуйте добавить элементы (адаптивный список, вычисляемые свойства, реализацию компонента прослушивания), нажав кнопку. Сейчас переехал на игровую площадку
• (vue) Сделайте мою карту компонентом VUE!
• (css) Оптимизируйте эффект анимации карты: она будет зависать при наведении на нее мыши!
• (css) Измените панель навигации element-plus на свою собственную!
• (css) Сделать свой собственный гибкий (Раньше это была сетка, но я обнаружил это позже) Стиль
• (vue) Логотип, совместимый с ночным режимом
• (nginx) загружен на мой сервер!
• Используйте vite+vue+element-ui(element-plus-vite-starter), чтобы создать свой собственный проект vue.

?️ Покрытые знания:

У меня нет опыта фронтенд-разработки, поэтому во время практики я учился у Baidu, Google или читал документы. Все нижеперечисленное присутствует на моем веб-сайте и отсортировано по пути обучения. Вы можете обратиться к ним за справкой.

ВУЭ

Я изучил комбинированный API напрямую. Как говорится, изучайте новое, а не старое! Библиотека компонентов использует element-plus от Alibaba.

• [Основы отзывчивости] reactive (не часто использую, все ссылаюсь напрямую), ref (ссылаемый объект становится отзывчивым), v-bind (обычно используется), {{}}
• [Основы грамматики] v-if (общеупотреб.), v-for (общеупотреб.), v-on (общеупотреб.), v-модель
• 【Вычисляемый атрибут】вычисляется
• [Компонентизация] реквизиты (часто используются), слоты (имя, храм. Часто используются), возврат события [$emit], прозрачные атрибуты
• [Управление маршрутизацией] Базовая конфигурация vue-router (путь, перенаправление, псевдоним, дочерние элементы, компонент)
• 【Анимация】Переход, TransitionGroup
• [Ночной режим] Принцип заключается в добавлении класса (темного) в html.
• [Отзывчивый мониторинг] смотреть

JavaScript/Типскрипт

• [Переменные] var, let, const (обычно используемые)
• [Основы объектов] array[], object{} (я использую его как карту), все является объектом (на этом этапе вы поймете, почему ref требует значения, прежде чем его можно будет использовать)
• [Метод, передача параметров, повторное использование] импорт, функция (вы можете понять принцип вычислений, объединив все, что является объектом)

CSS/СКСС:

• 【Основы стиля】
• 》》Стиль шрифта: цвет, размер шрифта, семейство шрифтов (шрифт, я напрямую копирую чужие)
• 》》Стиль контейнера: цвет фона, border-radius (закругленные углы), box-shadow (тень границы), border (отрисовка границы, я обычно включаю ее при разработке макета)
• [Основы макета] отступ (регулировка расстояния внутри контейнера), поля (регулировка расстояния вне контейнера), ширина/высота (100% можно заполнить автоматически, иначе будет некрасиво), максимальная ширина/максимальная высота
• [Адаптивный (гибкий) макет может сделать страницу совместимой с мобильными телефонами] display: flex, flex-direction, flex-wrap, justify-content, flex-grow (обычно используется)
• [Основы анимации] переход, трансформация, псевдокласс (например: наведение)
• [Приоритет стиля]!import (Моя вредная привычка: если сомневаешься, просто !import)

HTML

Вроде особого пункта знаний нет, только различные теги. Для базовых нужд достаточно использовать Baidu.

• Просто умейте использовать элементы div для разделения, а элементы div с тегами и синтаксисом могут решить большинство задач.
• Советы! Тег храма Vue не влияет на стиль!