В этом уроке я покажу вам, как создать приложение для меню ресторана с помощью Vue2, Vuex, Buefy и Cosmic JS. Он размещен на сервере приложений Cosmic JS. Мы будем использовать пакет Cosmic JS npm для реализации базового CRUD для наших объектов и для извлечения данных и мультимедиа из Cosmic JS. Давайте начнем.
Загрузите репозиторий GitHub.!
Посмотрите демо
Предпосылки
Перед запуском вам потребуется установить Node JS и npm. Убедитесь, что они у вас уже есть.
Начиная
Делаем все с использованием существующего репозитория git
Прежде всего, убедитесь, что у вас установлен узел ›6.x, а затем выполните следующие команды:
После успешного выполнения последней команды автоматически откроется окно браузера.
package.json будет выглядеть так.
Что мы устанавливаем и почему
- Мы собираемся использовать библиотеки vue и vuex для создания компонентов и управления состоянием.
- Мы используем пакет async для выполнения асинхронных запросов к Cosmic JS для удаления мультимедиа в цикле.
- Мы используем пакет buefy для создания макетов с использованием компонентов vue.
- Мы собираемся использовать библиотеку Cosmic JS для обработки запросов к нашей корзине Cosmic JS.
- vee-validate используется для проверки формы.
- nuxt используется для рендеринга на стороне сервера.
Создание нашего приложения
Теперь мы настроим наш nuxt.config.js в нашем корневом каталоге, где мы изменим значок и установим другие базовые свойства для свойств сборки ссылок приложения, линтинга и т. Д. Также мы включим внешние CDN, необходимые для приложения.
Ниже находится файл nuxt.config.js.
Настроить default.js
default.js в каталоге макетов является отправной точкой для всего приложения. Здесь мы включаем атрибуты основного представления, такие как панель навигации и нижний колонтитул. здесь важно то, что тег nuxt будет запускать все страницы в зависимости от маршрута.
В разделе сценария в beforeMount мы вызвали действия, которые нам нужно вызывать при загрузке приложения. Здесь стоит отметить getMenus. Это действие вызывает меню на текущую дату при запуске приложения. Мы также открыли магазин для компонентов vue.
Маршрутизация
При использовании nuxt.js нам не нужно беспокоиться о создании маршрутов. Nuxt сделает всю работу за нас. Нам нужно следовать правилам каталога файлов, описанным nuxt, и он создаст для нас все необходимые маршруты. Для получения дополнительной информации посетите Документация Nuxt.
Настроить index.vue
\pages\index.vue - это первая страница, которая будет отображаться. Я использовал компоненты buefy для пользовательского интерфейса. Вы можете ознакомиться с их документацией здесь. Самый важный блок кода здесь для включения компонента целевой страницы в шаблон. Этот фрагмент кода будет отображать компонент LandingPage.
Vuex
Двигаясь вперед, сначала я расскажу о Vuex и о том, почему мы должны его использовать. Очевидно, вы можете использовать простое состояние и свойства для небольших приложений. Но для больших приложений мы должны использовать какое-то управление состоянием, например, redux в React. Vuex поддерживается командой vue и широко используется. Сегодня мы воспользуемся этим. Ниже приведена блок-схема Vuex, которую я объясню.
В vuex есть четыре основных концепции.
- Состояние
- Действия
- Мутации
- Геттеры
Состояние - это место, где будет храниться все состояние / данные нашего приложения. Так как это будет работать? Например, вы используете это хранилище в своем компоненте и хотите изменить какое-то значение состояния. Вы должны отправить действие. Затем действие зафиксирует мутацию и изменит состояние. Итак, зачем нужны действия, мы можем изменить состояние непосредственно при мутации. Действие очень важно. Нам нужны действия, когда мы должны вызвать любую асинхронную функцию, а затем при ее успехе изменить состояние. В случае API мы потребляем запрос в действиях и фиксируем мутацию для изменения состояния. Это очень просто, но очень важно следовать.
Геттеры - это простая функция-геттер для получения значения состояния в компонентах. Если вам нужно одно значение состояния в разных компонентах, лучше создать для него геттер и использовать этот геттер в компоненте как вычисляемое свойство.
По соглашению создается папка vuex, а затем в ней создается store.js. Я сделал то же самое и создал store/store.js.
Это сокращенная версия Как создать приложение для меню ресторана. Полная версия доступна на Cosmic JS. Щелкните здесь, чтобы просмотреть статью полностью.
Заключение
Это базовое приложение для меню ресторана, созданное с использованием vue, vuex, Cosmic JS и nuxt.js. Надеюсь, вам понравился урок, и он будет вам полезен.
