🏗️ Настройка (часть 1/7)
Приготовьтесь разработать клон Deliveroo, используя удивительные технологии: Nuxt (Vuejs), GraphQL, Stripe и Strapi! От регистрации до заказа вы дадите пользователям возможность открывать для себя рестораны, блюда и выбирать подходящие блюда.
Демонстрация окончательного результата должна вас проголодать:
Примечание: исходный код доступен на GitHub: https://github.com/strapi/strapi-examples/tree/master/nuxt-strapi- Delitroo-clone-tutorial .
Nuxt
Nuxt.js - прекрасная платформа для создания приложений с Vue.js. Разработанный для создания готовых к производству приложений, он обеспечивает прочную структуру проекта, построенную с помощью Webpack и Babel.
Vue.js - один из самых известных интерфейсных фреймворков с более чем 100 000 звезд (🙈) на GitHub. Созданный в 2014 году Evan You, он быстро стал эталоном благодаря трем основным преимуществам: чрезвычайно простой, но мощный API, небольшой размер библиотеки и отличная производительность. .
GraphQL
REST - это соглашение, по которому работает 99% действующих API. После перехода на протокол SOAP он быстро стал фактическим соглашением из-за своей простоты.
В 2015 году Facebook опубликовал GraphQL: мощный язык запросов для запросов API. С момента публикации он продолжал расти и был принят такими гигантами, как GitHub, Twitter и Yelp.
Страпи
Strapi - это самая продвинутая платформа управления контентом API Node.js. На полпути между Node.js Framework и Headless CMS он экономит недели времени на разработку API.
Благодаря расширяемой системе плагинов, он предоставляет большой набор встроенных функций: панель администратора, аутентификация и управление разрешениями, управление контентом, генератор API и т. Д. В отличие от онлайн-CMS, Strapi на 100% имеет открытый исходный код (взгляните на репозиторий GitHub), что означает:
- Strapi полностью бесплатен.
- Вы можете разместить его на своих серверах, чтобы данные принадлежали вам.
- Он полностью настраиваемый и расширяемый благодаря системе плагинов.
Полоса
Stripe - это процессор онлайн-платежей, который значительно упрощает жизнь разработчикам при работе с платежами. В этом уроке мы будем использовать его для обработки заказов.
Ждем, чтобы приготовить это приложение? Давайте приступим!
Оглавление
🏗️ Настройка
Nuxt
Прежде всего, вы собираетесь настроить проект Nuxt. Для этого установите Vue CLI:
npm install -g vue-cli
Создайте каталог с именем deliveroo-clone-tutorial
:
mkdir deliveroo-clone-tutorial
Затем в этой новой папке сгенерируйте новый проект Nuxt:
cd deliveroo-clone-tutorial
vue init nuxt-community/starter-template client
Нажимайте вводить для каждого вопроса.
Установите модули узла:
cd client npm install
На этом этапе вы должны увидеть список сгенерированных файлов в новой папке client
. Чтобы узнать больше об этой структуре, взгляните на Документацию по структуре каталогов Nuxt.
Наконец, запустите приложение из каталога client
:
npm run dev
Держи! Откройте http: // localhost: 3000, чтобы открыть для себя новое приложение.
Добавление Bootstrap
Чтобы улучшить дизайн, мы добавим Bootstrap. Для этого обновите установленные зависимости:
npm i bootstrap-vue
Добавьте bootstrap-vue / nuxt в раздел модулей nuxt.config.js
:
Путь: nuxt.config.js
Создание компонента заголовка
В то же время мы собираемся создать наш первый компонент, который мы будем повторно использовать в проекте.
Путь: components/Header.vue
Используйте его в макете по умолчанию, удалите его стиль:
Путь: layouts/default.vue
Очистите содержимое домашней страницы и удалите его стиль:
Путь: pages/index.vue
Перезагрузите сервер, чтобы увидеть изменения, по адресу http: // localhost: 3000.
Страпи
Иметь интерфейс - это хорошо, но вашему приложению явно нужен бэкэнд для управления пользователями, ресторанами, блюдами и заказами. Чтобы волшебство произошло, давайте создадим Strapi API.
Установить Strapi
Требования: убедитесь, что вы используете Node 9 (или более) и на вашем компьютере установлены и работают MongoDB, Postgres или MySQL.
Установите Strapi с помощью npm:
npm i strapi@alpha -g
Примечание. Strapi v3 все еще является альфа-версией, но она подойдет для этого руководства.
Создать проект Strapi
Создайте свой API внутри deliveroo-clone-tutorial
с помощью единой командной строки:
cd deliveroo-clone-tutorial
strapi new server
Интерфейс командной строки попросит вас выбрать базу данных: выберите MongoDB, Postgres или MySQL. Затем введите информацию о базе данных. Значения по умолчанию должны работать, если вы правильно установили систему базы данных на своем компьютере.
Запустить сервер
Запустите сервер Node.js:
cd server strapi start
С этого момента вы сможете посетить админ-панель вашего проекта: http: // localhost: 1337 / admin.
Создайте своего первого пользователя
Добавьте своего первого пользователя со страницы регистрации.
Молодцы, вы успешно настроили проекты Nuxt и Strapi! 🎉
🏠 В следующем разделе вы узнаете, как отобразить список ресторанов: https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js -graphql-strapi-and-stripe-Restaurants-list-part-2-7 .
Первоначально опубликовано на сайте blog.strapi.io 3 июля 2018 г.