Шаг 3: создайте папку приложения для vue js:

Во-первых, давайте создадим в рабочей области папку приложения под названием Client:

mkdir Client
cd Client

Теперь мы хотим настроить наш клиент Vue js для интерфейса. Мы будем использовать vue-cli для создания шаблона.

vue create client

Теперь у нас есть папка с именем Cient в нашем приложении. Как мы видим, теперь нам нужно запустить npm install внутри папки client, чтобы установить все зависимости, перечисленные в client/package.json файле. Итак, давайте продолжим и сделаем это.

npm install
npm run serve

Запуск npm run serve откроет http://localhost:8080/ в браузере, который отображает шаблон VueJS по умолчанию.

Прежде чем мы начнем, нам нужно установить некоторые другие функции для работы, такие как axios, vue-router и vuex, для этого просто запустите эту команду

npm install --save axios vue-router vuex

Теперь, когда мы установили, нам нужно импортировать его в наш рабочий файл.

Теперь в нашем App.vue нам нужно создать маршрутизатор-ссылку для маршрутизации по всем маршрутам на нашем веб-сайте.

Как мы видим, мы импортировали в этот файл один компонент под названием Navbar, который хорошо отображает наше меню:

Как мы видим, мы получаем все категории из нашего бэкэнда, и мы перебираем его, чтобы отобразить наше меню, и мы получаем вычисленное свойство из нашего магазина с vuex, которое мы собираемся использовать в этом руководстве прямо сейчас, чтобы отображать длину корзины в нашем меню. также.

Теперь, когда мы создали наше меню, мы собираемся показать весь наш продукт на домашней странице, для этого нам нужно создать компонент с именем Products.vue, который будет содержать все продукты, используя простую страницу.

Как мы видим, мы импортировали один компонент под названием Card.vue, который мы отправили вместе со всеми нашими продуктами в качестве реквизита.

Здесь также мы импортировали компонент Card, который содержит информацию о конкретном продукте.

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

Чтобы реагировать на нашу корзину, мы использовали vuex, который упростит получение и настройку наших данных на нашу страницу оформления заказа.

Теперь нам нужно определить массив маршрутов и добавить этот компонент в этот список.

В нашем корневом каталоге нам нужно создать папку с именем route, содержащую файл index.js, в котором мы собираемся зарегистрировать все наши маршруты.

Чтобы прочитать описание конкретного продукта, нам понадобится компонент под названием Product.vue, в котором мы отображаем всю информацию об одном продукте.

Здесь также мы используем миксины, которые содержат функцию addToCart, которую мы использовали раньше.

Шаг 3: оформление заказа

Давайте сначала создадим файл компонента под названием checkout, который будет содержать наш продукт, который нам нужно купить:

Как мы видим здесь, мы использовали Stripe для оплаты, поэтому, чтобы использовать его с экспрессом, нам нужно вернуться к нашему внутреннему файлу и добавить новый маршрут для оформления заказа.

В app.js у нас есть один маршрут «/ charge», который позаботится о нашем платеже.

Если все работает хорошо, мы получаем ответ на наш компонент оформления заказа, который перенаправит нас на страницу благодарности:

Код для клиентского приложения: https://github.com/jaouadballat/vueexpress

Код для сервера: https://github.com/jaouadballat/vueexpress-2