Устанавливаем работу Laravel в связке с Vue.JS в Timeweb
После того, как был предварительно обновлен Composer, установлена Laravel на хостинге, установлен Node JS и установлены библиотеки Laravel UI, можно установить и активировать функции библиотеки Vue.JS как нативное окружение Laravel.
Для установки Vue.JS необходимо выполнить команду
//вызывается из консоли (SSH)
php artisan ui vue
Если все пройдет успешно, то получим сообщение об этом такого вида:
В результате выполнения команды в папке /resources/js/ должна появиться новая папка /components/
А файл /resources/js/app.js должен заполниться данными примерно такого вида.
Если все прошло удачно, то необходимо выполнить команду
//вызывается из консоли (SSH)
npm install && npm run dev
Данная команду произведет первичную компиляцию данных Vue.JS и переведет вас в режим разработки, из которого на данном этапе можно выйти нажатием сочетания клавиш Ctrl+C.
Необходимо проверить что был создан новый скомпилированный файл /public/js/app.js
Если файл не создается, то необходимо выполнить команду
//вызывается из консоли (SSH)
npm run development
Здесь могут возникать разные предупреждения об ошибках. В случае их возникновения возможно придется дополнительно выполнять обозначенные предупреждением команды. Так, к примеру, может возникнуть такое предупреждение.
В случае возникновения такого необходимо выполнить команду
//вызывается из консоли (SSH)
npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps
После всех обозначенных выше действий необходимый нам файл компиляции /public/js/app.js должен появиться в этой папке в скомпилированном виде. О чем будет гласить сообщение такого рода:
Осталось проверить работоспособность Vue.JS. Для этого в любом из файлов папки /resourses/, который выводится в качестве вьюера по какой-то из ссылок сайта, нужно вставить код отображения стандартного тестового компонента ExampleComponent.vue который идет в базовом пакете Vue при установке и находится в папке /resources/js/components/.
Например, при базовой установке Laravel при входе на сайт отображаются данные из файла /resources/views/welcome.blade.php. Нужно добавить в него код Vue.JS в таком формате:
//прописывается в одном из файлах resources
<div id="app">
<example-component></example-component>
</div>
Также в конец файла нужно добавить скрипт вызова скомпилированного файла /public/js/app.js. Лучше это сделать перед закрывающим тегом
