Установка и настройка

Обновлено 6.25.20

Вступление

В этой серии руководств для начинающих мы создадим интернет-магазин на базе Vue. Наши цели будут заключаться в том, чтобы лучше познакомиться с Vue и его основными возможностями, познакомиться с компонентной архитектурой, повысить нашу уверенность в управлении состоянием приложения и изучить полезную терминологию разработчиков. Я предполагаю, что вы знакомы с HTML, CSS и, по крайней мере, с концепциями Javascript для начинающих.

К концу у вас будет прототип, который включает:

  • домашняя страница, на которой представлены определенные элементы
  • подробные страницы для каждого товара в магазине
  • страница корзины, на которой отображаются выбранные пользователем товары для покупки
  • сортируемая и фильтруемая страница «полного каталога», содержащая все товары магазина

Однако, поскольку это всего лишь прототип, мы не будем рассматривать хостинг или обработку платежей. А теперь приступим!

Шаг 1. Установите Vue CLI

Vue CLI - это стандартный интерфейс командной строки для Vue.js . Согласно документации, это простой способ быстро разрабатывать приложения Vue, не тратя слишком много времени на настройку. Вместо того, чтобы тратить часы на настройку своего проекта со всеми необходимыми папками и конфигурациями, вы можете сразу приступить к написанию классного кода.

Вместо того, чтобы заставлять вас часами настраивать проект, Vue CLI позволяет сразу приступить к написанию классного кода.

Для начала откройте приложение «Терминал» на своем Mac и убедитесь, что у вас установлен Node, так как Vue CLI требует Node.js версии 8.9 или выше (рекомендуется 8.11.0+). Выполните следующую команду:

node -v

Если он установлен, вы получите следующий результат:

v12.16.3

В противном случае посетите nodejs.org/en, загрузите необходимые файлы и следуйте инструкциям по установке.

Затем мы установим Vue CLI. Вернувшись в то же окно терминала, запустите:

npm install -g @vue/cli

Вышеупомянутая строка устанавливает последнюю версию Vue CLI через npm (диспетчер пакетов узлов), инструмент для установки, совместного использования и распространения кода.

Если вы получаете ошибку, связанную с разрешениями, из приведенной выше команды, попробуйте вместо этого запустить следующее:

sudo npm install -g @vue/cli

Подтвердите, что вы успешно установили версию 3.x, введя:

vue --version

Вы должны увидеть что-то вроде:

3.12.1

(Эта статья последний раз обновлялась 25 июня 2020 г. В то время последняя версия @ vue / cli была 4.4.6. Это руководство было создано с помощью 3.12.1, поэтому могут быть некоторые незначительные отличия.)

Шаг 2. Создайте новый проект

Откройте новое окно терминала и перейдите туда, куда вы хотите сохранить проект. Я собираюсь сохранить свой в папке «Документы» на моем компьютере. Чтобы попасть туда, я наберу:

Nathans-MacBook-Pro:~ nathanmagyar$ cd documents
Nathans-MacBook-Pro:documents nathanmagyar$

Теперь, когда я нахожусь внутри «Документов», я создам новый проект, выполнив команду ниже («интернет-магазин» будет именем корневого каталога нашего проекта, который создается автоматически):

Nathans-MacBook-Pro:documents nathanmagyar$ vue create online-store

Затем вас спросят, как вы хотите настроить проект. Начните с выбора функций вручную (стрелка вниз и нажмите «Ввод»):

Выберите следующие параметры, перейдя к ним с помощью клавиш со стрелками и нажав пробел. Babel - это тип компилятора, который мы будем использовать. Router - это плагин, который позволяет нам создать иллюзию разных страниц / URL в приложении. Vuex предназначен для более сложного управления данными. Препроцессоры CSS позволят нам выбрать препроцессор позже, чтобы мы могли писать CSS более эффективно. Linter / Formatter позволит нам выбрать линтер, чтобы наш код оставался чистым и аккуратным. Нажмите Enter после того, как вы выбрали все пять:

Введите Y, чтобы включить режим истории для маршрутизатора:

В режиме истории наши URL-адреса будут отображаться в проекте «нормально». По умолчанию, режим хеширования, перед URL-адресом ставится #, что вызывает ненужную путаницу.

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

Выберите предпочитаемый ЛИНТЕР. Я пойду с Prettier:

Выберите «Lint on save», чтобы мы могли чаще обнаруживать ошибки:

Нажмите «Enter», чтобы сохранить отдельные файлы конфигурации для проекта (стандартная передовая практика):

Если хотите, сохраните эти настройки для будущих проектов в качестве предустановки. Это поможет вам начать работу еще быстрее. Введите «y» и нажмите Enter:

Выберите имя для предустановки и нажмите «Enter». У меня имя «базовое красивее»:

На этом процесс создания проекта должен быть завершен! Чтобы убедиться, что проект был успешно создан, запустите:

Nathans-MacBook-Pro:documents nathanmagyar$ cd online-store
Nathans-MacBook-Pro:online-store nathanmagyar$ npm run serve

Зайдите на http: // localhost: 8080 /, где вы должны увидеть:

Шаг 3. Просмотрите содержимое каталога проекта

Итак, мы проделали кучу вещей, чтобы добраться до этого момента. Давайте сделаем паузу и посмотрим, что Vue CLI дает нам по умолчанию, обычно известный как «шаблонный» код. После открытия корневого каталога интернет-магазина в выбранном вами редакторе вы увидите следующее содержимое:

  • В общедоступном каталоге вы можете размещать статические ресурсы, такие как файлы CSS и изображения, и получать к ним доступ по абсолютным путям, но мы этого не сделаем. Эта папка в основном используется, когда приложение находится в разработке. См. Когда использовать общую папку внизу этой страницы, чтобы узнать о других случаях, когда вы можете ее использовать. Этот каталог также содержит файл index.html, который включает важный тег ‹div›:
<div id="app"></div>

Именно здесь наше приложение в конечном итоге будет добавлено на страницу с помощью магии Webpack, стандартного сборщика модулей, который берет все файлы в каталоге нашего интернет-магазина и преобразует их в обычные файлы HTML, CSS и JS.

  • Каталог «src» - это то место, где мы будем выполнять всю нашу работу по разработке.
  • Внутри «src» «assets» можно хранить глобальные файлы CSS и изображения, доступ к которым осуществляется по относительным путям.
  • В каталоге «components» будут храниться все отдельные файловые компоненты, которые будут составлять приложение (кнопки, карточки, формы и т. Д.). «Компоненты одного файла» - это термин, который в данном случае относится к файлам, заканчивающимся на .vue. Подробнее об этом типе файлов мы поговорим в другом посте.
  • В каталоге «просмотров» будут храниться все компоненты, которые больше похожи на страницы в нашем приложении (домашняя страница, сведения о продукте, полный каталог, корзина и т. Д.). Считайте их основными файлами .vue. Обратите внимание, что и «компоненты», и «представления» содержат компоненты одного файла .vue, но разделены, чтобы сделать их назначение более понятным (элементы пользовательского интерфейса и страницы, соответственно).
  • App.vue служит базовым файлом .vue, в котором находятся аспекты навигации и маршрутизации. Маршрутизация - это идея одностраничного приложения, лежащая в основе ссылки на другие страницы, о которой я расскажу позже. ‹Router-view› - это то, что позволяет нам отображать «страницы», такие как файл Home.vue.
  • Router.js хранит массив всех маршрутов (также называемых ссылками), которые мы будем использовать для приложения. Каждому маршруту нужен относительный путь (для URL-адреса), имя (чтобы вы могли легко ссылаться на него во всем приложении, не запоминая потенциально длинный относительный путь) и компонент (скорее, what view хотите показать на этом маршруте).
  • Store.js (или store / index.js для тех, кто использует Vue CLI 4.4.6+) содержит все наши глобальные данные о состоянии (например, инвентарь продуктов) и обрабатывает любые обновления, которые мы хотим внести в него. Здесь в игру вступает Vuex, но об этом позже.
  • Наконец, main.js создает экземпляр Vue, который объединяет наши маршруты (ссылки), данные (в магазине) и базовый файл .vue. Он также указывает идентификатор (#app), который должен искать Webpack, чтобы вставить / смонтировать наше приложение в public / index.html.
  • Остальные файлы в «интернет-магазине», кроме «src», представляют собой набор деклараций конфигурации для вашего проекта, о которых вам действительно не нужно беспокоиться в целях данного руководства.

Ух! Поздравляю с запуском этого проекта. В следующем посте мы поработаем над тем, чтобы в интернет-магазине отображались фиктивные данные.

Спасибо за прочтение! 👋