Подробное руководство по легкой настройке Vue 3 и AdonisJS с помощью Laravel Mix.
AdonisJS — это одна из полнофункциональных сред Node.js, подобных Laravel, которая имеет некоторые преимущества по сравнению с Laravel. Одна из причин, по которой я использовал AdonisJS, заключается в том, что некоторые блокчейн-проекты (Eth/Algo) предоставляют только SDK для JavaScript. Конечно, мы можем справиться со всеми вещами, связанными с разработкой блокчейна, используя наш интерфейс (Vue.js/React) внутри нашего проекта с полным стеком, но он может быть не очень гибким, если наш сервер вообще не поддерживает эти SDK.
AdonisJS включает в себя все необходимое для создания полнофункционального веб-приложения или сервера API. https://adonisjs.com
Мы знаем, что у AdonisJS есть механизм шаблонов Edge для внешнего интерфейса. Но иногда использование и интеграция другого внешнего интерфейса, такого как Vue.js, является одним из вариантов. Vue.js популярен, и я думаю, что многие разработчики уже знали Vue.js по сравнению с Edge. Но наверняка будет удобнее и быстрее, если мы будем знать, как разрабатывать с помощью Edge. Но сегодня я покажу вам, как интегрировать Vue 3 и AdonisJS с помощью Laravel Mix.
Обзор контента
- Настройка Adonis и Laravel Mix
- Настройка Vue 3
# 1 Настройка Adonis и Laravel Mix
Прежде всего, давайте начнем с установки проекта Adonis. В этом примере я создам новую папку проекта с именем vue-integration.
npm init adonis-ts-app@latest vue-integration
Первая установка задаст вам несколько вопросов, и вы можете выбрать любые варианты, которые вам нравятся.
Затем нам нужно установить некоторые необходимые пакеты для микса Laravel. Позже микс Laravel поможет нам скомпилировать наш проект Vue.
npm i adonis-mix-asset && npm i --save-dev laravel-mix
При этой установке нам нужно настроить веб-пакет для нашего проекта Adonis.
node ace invoke adonis-mix-asset
После приведенной выше команды в корневой папке будет создан файл webpack.mix.js. Давайте откроем и изменим его.
Что делает наш веб-пакет, так это то, что он рассматривает resources/vue/main.js как отправную точку для нашего проекта Vue позже. Затем, конечно, он извлекает некоторые дополнительные параметры, например, помогающие нам позже скомпилировать наш sass.
Затем нам нужно поместить скрипт в файл Edge. Давайте создадим новый пограничный файл в разделе resources/views/index.edge.
Давайте обновим маршруты Adonis в разделе start/routes.ts. Таким образом, любой доступ пользователя к конечной точке позже будет перенаправлен в наше приложение Vue.
Все хорошо! Сейчас самое время настроить наш Vue 3 JS.
# 2 Настройка Vue 3
Начнем с необходимых пакетов для нашего проекта Vue.
npm i [email protected] vue-router@next && npm i -D @vue/compiler-sfc sass sass-loader vue-loader@^16.8.3 autoprefixer postcss
Обратите внимание, что установка Vue 3 немного сложна. Компиляция может завершиться ошибкой, если вы используете другую версию пакета. Пожалуйста, взгляните на версию пакета, который вы используете.
В этом примере я помещу все, что связано с приложением Vue, в каталог resources/vue. В конце концов, у нас будет маршрутизатор Vue, компоненты и страницы для нашего Vue.
Я покажу вам два важных компонента для установки Vue 3: файлы router и main.js. Остальные компоненты Vue не будут рассмотрены, потому что это будет больше интерфейсных кодов, но вы можете увидеть пример в моем Github под этой статьей.
Давайте откроем (или создадим) файл resources/vue/main.js в качестве отправной точки для приложения Vue.
Затем для маршрутов в resources/vue/router/index.js
Вот и все! Чтобы скомпилировать наше приложение Vue, нам понадобится смесь Laravel.
node ace mix:watch # Development node ace mix:build # Production Build
Затем давайте запустим сервер Adonis, чтобы увидеть наше веб-приложение.
node ace serve --watch # Development node ace build --production # Production Build
Вуаля, теперь наш AdonisJS использует Vue 3 в качестве интерфейса с помощью микса Laravel.
Vue 3 имеет значительное улучшение производительности по сравнению с Vue 2, и это причина, по которой я использую Vue 3 в этой статье. Кроме того, настройка Vue 3 немного сложна, поскольку это может привести к сбою компиляции, если у нас установлена другая версия пакета. Взгляните на мой package.json в моем Github ниже для справки, если вы не можете успешно скомпилировать свой Vue 3.
Ресурсы
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
