Устанавливаем работу Laravel в связке с Vue.JS в Timeweb

 

После того, как был предварительно обновлен Composer, установлена Laravel на хостинге, установлен Node JS и установлены библиотеки Laravel UI, можно установить и активировать функции библиотеки Vue.JS как нативное окружение Laravel.

Для установки Vue.JS необходимо выполнить команду

    //вызывается из консоли (SSH)
    
      php artisan ui vue
   

Если все пройдет успешно, то получим сообщение об этом такого вида:

 

Сообщение об успешности установки Vue.JS

 

В результате выполнения команды в папке /resources/js/ должна появиться новая папка /components/

А файл /resources/js/app.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. Лучше это сделать перед закрывающим тегом

    //прописывается в одном из файлах resources
    
      <script src="{{ mix('js/app.js') }}"></script>
   

Если все установлено корректно, то при переходе на наш сайт увидим отображение данных компонента /resources/js/components/ExampleComponent.vue в таком виде:

 

Подтверждение работоспособности VueJS

 

Это означает что Vue.JS теперь работает как нативное окружение Laravel и теперь можно использовать все преимущества этого инструментария.

Реклама

 

Кейсы