Блог

Главная - Вопросы по программированию - Как установить Vue.js в Laravel 8

Как установить Vue.js в Laravel 8

#vue.js #laravel-8

#vue.js #laravel-8

Вопрос:

Я использую laravel 8 и теперь хочу установить Vue.js . Я пытаюсь вот так

  1. composer require laravel/ui
  2. php artisan ui vue
  3. php artisan ui vue --auth

Ответ №1:

ОБНОВЛЕНИЕ: если вы хотите полностью избежать инерции / Livewire (Alpine.js ) создайте строительные леса в своих приложениях Laravel ^ 8.0 и используйте вместо этого Vue — установите Laravel UI, который, скорее всего, будет поддерживаться бесконечно (масштабируется до практического срока службы программного обеспечения).

Инструкции по установке Vue (и старых каркасов аутентификации) в вашем приложении Laravel:

  1. выполнить composer require laravel/ui
  2. запустите php artisan ui vue только для установки Vue.
  3. запустите php artisan ui vue --auth для создания лесов из представлений аутентификации.
  4. выполнить npm install amp;amp; npm run dev

Однако, если вы все еще хотите использовать Vue.js с Livewire строительными лесами, воспользуйтесь следующими инструкциями.

ВАЖНО: Пожалуйста, обратите внимание, что Vue.js после установки получает контроль над DOM, отсоединяя узлы и заменяя его, удаляя другие прослушиватели JS. Итак, если вы используете Livewire на той же странице, что и Vue, Alpine.js который поставляется с Livewire строительными лесами, не будет работать. В качестве обходного пути вы можете использовать плагин поддержки Livewire VueJS.

  1. выполнить npm install --save vue

  2. Добавьте следующее в свой resources/js/app.js:

      window.Vue = require('vue');
 Vue.component('example-component', require('./components/ExampleComponent.vue').default);
 const app = new Vue({
   el: '#app',
 });

  3. Создайте ExampleComponent.vue в каталоге resources/js/components

     <template>
  <div>Hello World.</div>
</template>

<script>
  export default {
    mounted() {
      console.log("Example component mounted");
    }
  };
</script>

  4. Добавьте <script src="{{ asset('js/app.js') }}" defer></script> в <head> раздел вашего файла макета ( resources/views/layouts/app.blade.php )

  5. Добавить id="app" в <body> или main <div> в свой файл макета ( resources/views/layouts/app.blade.php )

  6. Добавить <example-component /> в свой вид

  7. Запустите npm run dev или npm run watch

  8. Наконец, откройте devtools, и в журнале консоли вы должны увидеть Example component mounted

Ответ №2:

В проекте laravel 8 выполните следующие команды для установки vue.js

  1. выполнить composer require laravel/ui
  2. Установить Vue php artisan ui vue
  3. Установите Vue с авторизацией php artisan ui vue --auth
  4. выполнить npm install amp;amp; npm run dev

Ответ №3:

Я потратил так много времени на это и не хочу, чтобы люди проходили через то же самое, поэтому я научу вас, как установить Vue.js и заставить его работать быстро.

Если вы хотите начать с нуля

замените LaravelProject на название вашего проекта

 laravel new LaravelProject

Установить Vue.js в вашем приложении Laravel 8

выполните следующие команды

 composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install 
npm run dev
npm run watch

Теперь, когда вы установили все, что вам нужно, перейдите к просмотру блейда и добавьте следующий код внутри <body></body> 

 <div id="app">
  <example-component />
</div>
<script src="{{ mix('/js/app.js') }}"></script>

Если вы все сделали правильно, вы увидите следующий текст о рендеринге вашего представления

 Example Component
Im an example component.

И в вашей консоли:
Component mounted.

Комментарии:

1. Если я сделаю это, мне не понадобится авторизация пользователя, поскольку я делаю это другим способом, просто не запускайте «php artisan ui vue —auth» правильно?

Ответ №4:

Вы можете установить Vue 3 в свой проект laravel тремя различными способами:

  1. Импортируйте его как пакет CDN на странице
  2. Загрузите файлы JavaScript и разместите их самостоятельно
  3. Установите его с помощью npm

1. Через CDN

включите следующий код в свой HTML-файл:

 <script src="https://unpkg.com/vue@next"></script>

или используйте следующую ссылку для производства:

 https://cdnjs.com/libraries/vue

2. Загрузите и разместите самостоятельно:

Загрузите его с GitHub здесь:

 https://github.com/vuejs/vue-next

3. Через npm

npm является рекомендуемым методом установки при создании крупномасштабных приложений с Vue. Он прекрасно сочетается с пакетами модулей, такими как Webpack (открывает новое окно) или Rollup (открывает новое окно). Vue также предоставляет сопутствующие инструменты для создания отдельных файловых компонентов.

Запустите эту команду в своем терминале, чтобы получить последнюю стабильную версию

 $ npm install vue@next

За которым следует:

 npm install

Комментарии:

1. Определенно, вариант 3 — это лучший способ пойти, наверняка.

Ответ №5:

Запустите команду

 npm install vue

В resources/js/bootstrap.js

 window.Vue = require("vue/dist/vue.min");

А затем запустить команду

 npm run dev

Ответ №6:

Вы можете попробовать npm install --save vue

Комментарии:

1. хорошо, спасибо, и я могу использовать vue вместо livewire, верно?

Ответ №7:

Вы можете установить vue на laravel 8, просто выполнив приведенные ниже команды для установки laravel ui:

 composer require laravel/ui

И если вам нужны авторизации, такие как страница входа в систему, каркас страницы регистрации, выполните приведенную ниже команду из папки, в которой установлен проект laravel:

 php artisan ui vue

После выполнения вышеуказанных команд запустите, чтобы установить все зависимости и скомпилировать все ресурсы стиля:

 npm install
npm run dev
npm run watch

Ответ №8:

Настройка Vue в Laravel

  1. выполнить composer require laravel/ui
  2. Установить Vue php artisan ui vue
  3. если вы устанавливаете Vue с авторизацией, используйте php artisan ui vue --auth
  4. добавить после в мастер страницы
  5. выполнить npm install
  6. выполнить npm run dev
  7. выполнить PHP artisan serve

Ответ №9:

В существующем проекте Laravel 8 лучше выполнить эту установку, которая занимает одну строку:

 npm i -D vue@next @vue/compiler-sfc vue-loader@next

Для правильной работы вашего проекта также важно проверить webpack.mix.js , это должно выглядеть следующим образом:

 mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Также при работе с проектом не забывайте:

 npm run watch

Надеюсь, это было полезно!

Ответ №10:

Довольно простой и понятный набор инструкций

https://laravel2020.com/2022/01/25/how-to-install-vue-3-on-an-existing-laravel-8-project/

Ответ №11:

** Установите Vue Laravel 8

composer create-project laravel/laravel projectName --prefer-dist

composer require laravel/ui

php artisan ui vue

npm install

npm run dev

npm i vue-loader

npm install vue-router vue-axios

npm run dev

Успех.