Я хотел попрактиковаться в Vue CLI и создать что-нибудь интересное. Я фанат покемонов (из 90-х) и был взволнован, когда обнаружил pokéAPI. Затем я нашел NES.css, и это, очевидно, был идеальный выбор для классного приложения. Я включил только первого 151 покемона, потому что я больше фанат покемонов первого поколения 😉

Чтобы дать небольшое представление о себе, я маленький Front-end разработчик 🐭 все еще много узнаю о Front-end. Если вы тоже новичок, можете сесть и прочитать эту статью. И если вы опытный разработчик или просто любопытный человек, который просто хочет узнать больше о Vue, вы, конечно, тоже можете прочитать 😉

Vue - один из самых популярных в настоящее время фреймворков (наряду с Angular и React). С помощью фреймворка вы можете создавать приложения быстрее, чем просто HTML, CSS и простой Javascript. В фреймворках уже есть множество функций и плагинов, которые они предлагают, и рекомендуемые библиотеки, совместимые с фреймворком, так что вам не нужно во всем разбираться самостоятельно. Так зачем нам Vue CLI? Это способ запустить ваш проект Vue с заранее установленными плагинами и библиотеками и включить встряхивание дерева (устанавливайте только те модули, которые вам нужны из сторонних библиотек). Это может значительно улучшить производительность по сравнению с использованием CDN (тегов таблиц стилей скриптов и ссылок в HTML). Кроме того, Vue CLI помогает вам с исходной структурой папок вашего приложения и кодом начальной настройки для библиотек 🎉

В этом руководстве мы собираемся перестроить Pokédex с помощью Vue CLI. Это руководство разделено на четыре части:

  1. "Начальная настройка"
  2. Маршрутизация и государственное управление
  3. "Компоненты"
  4. Необязательно: постоянное состояние и извлеченные уроки

Если вы хотите заранее увидеть Демо Pokédex, вы можете просмотреть его здесь

Пароль для входа pokemonmaster

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

Возможно, что код в репо отличается от кода, упомянутого во время написания. Небольшие изменения могли быть добавлены для оптимизации кода. Также сообщите мне, если вы заметите какие-либо ошибки или улучшения в этой статье 😉

Давайте начнем

Итак, сначала установите Vue CLI глобально на свой компьютер. Вам нужна версия Node.js выше 8.9 (вы можете проверить это с помощью команды node -v). Если у вас еще не установлены Node.js и npm, вам следует установить их, если вы хотите продолжить разработку.

Конечно, вы также можете использовать yarn для создания нового покедекса с нуля, но я использовал npm для своего проекта.

Откроем терминал. Команда для установки Vue CLI выглядит следующим образом

npm install -g @vue/cli

Чтобы проверить, правильная ли у вас версия (выше 3)

vue --version

Итак, теперь давайте создадим новый проект. Откройте папку, в которой вы хотите создать проект, и откройте там терминал.

vue create pokedex

Вам будет предложено выбрать предустановку. В нашем случае выберите «Выбрать функции вручную». Выберите следующие параметры, нажав пробел (отправьте, нажав клавишу ВВОД):

  • Вавилон
  • Маршрутизатор (режим истории «да»)
  • Vuex
  • Дополнительно: линтер / форматтер (линтер с более красивым и ворсовым при сохранении)

Ничего страшного, если вы случайно пропустите одну библиотеку / плагин. Вы можете просто добавить его позже, используя команду npm install в командной строке (вы можете найти конкретную команду для каждой библиотеки в npm). Так зачем нам Babel, Router и Vuex?

Babel - это транспилятор кода, который превращает новый код JavaScript в старый код JavaScript. Новые браузеры, такие как Chrome и Firefox, смогут понимать новый код JavaScript (также известный как ES2015 или ES6), но старые браузеры, такие как Internet Explorer, не могут понимать новый код JavaScript. Таким образом, приложение можно запускать в разных браузерах.

Мы используем Vue Router для перехода между страницами. Раньше у вас был HTML-файл для каждой страницы и вы могли перемещаться между страницами. С помощью vue вы можете создать одностраничное приложение, в котором рендеринг происходит на одной странице. Перемещение между страницами моделируется с помощью javascript. Мы используем режим history, чтобы переопределить поведение по умолчанию, которое заключается в том, что # добавляется к URL-адресу для предотвращения перезагрузки страницы при переходе на другую страницу. В режиме history мы также можем предотвратить перезагрузку страницы, но без странного # в нашем URL-адресе.

Vuex необходим для управления состоянием. Он сохраняет внутренние данные / память вашего приложения. Пока ваше приложение работает, данные будут храниться в центральном месте. С помощью этой библиотеки вы можете сложным образом настраивать и изменять данные в магазине.

Если хотите, можете добавить опцию линтера / форматтера. Кодировать не обязательно, но для удобства чтения хорошо иметь аккуратный отступ.

Затем нужно будет открыть каталог проекта с помощью следующей команды

cd pokedex

И запустите приложение с

npm run serve

При переходе по URL-адресу localhost, указанному в терминале, вы увидите следующее (http: // localhost: 8080 по умолчанию, если на этом порту еще не запущено другое приложение)

Если вы откроете папку проекта и перейдете в package.json, вы найдете в нем установленные библиотеки, а также команды npm run, которые вы можете запустить. Отсюда и появилась команда npm run serve. На данный момент вам нужна только эта команда. Однако полезно знать, что вы можете добавлять новые команды и зависимости вручную.

Хорошо, обо всем по порядку. Мы хотим добавить NES.css, чтобы придать нашему приложению 8-битный вид. Перейдите к index.html и добавьте следующий текст между тегами ‹head›.

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"/>
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<style>
      html, body, pre, code, kbd, samp {
          font-family: 'Press Start 2P', cursive;
}
</style>

Вы можете спросить, в чем разница между общедоступной папкой и папкой src. Все, что помещено в общедоступную папку, не будет обработано Webpack (сборщиком модулей), который обычно выполняет оптимизацию. Все статические файлы, такие как favicon, будут скопированы и вставлены во встроенную версию приложения. Index.html - это корень приложения, поэтому мы определяем здесь основной стиль. Обычно мне больше нравится определять глобальный стиль во внешних файлах CSS, а не во встроенном CSS, но здесь мы определяем только семейство шрифтов.

В папке src происходит вся магия Vue. Давайте создадим страницы, маршрутизацию и управление состоянием в следующей части этого руководства 👋 🐭