Установить vue 3.0 в laravel

#laravel #vue.js #webpack #vue-component #vuejs3

#laravel #vue.js #webpack #vue-компонент #vuejs3

Вопрос:

Есть ли способ установить vue 3.0 в Laravel 8? Когда я запускаю

 npm install vue@next
  

Он начал устанавливать Vue 3.0, но по какой-то причине он также начал устанавливать vue-template-compiler v2.6.12. Появится следующее:

     Additional dependencies must be installed. This will only take a moment.

    Running: npm install vue-template-compiler --save-dev --production=false
  

А затем, когда я запускаю

 npm run dev
  

Появляется следующая ошибка:

  • vue@3.0.0 (C:wamp64wwwvue-samplenode_modulesvueindex.js )
  • vue-template-compiler@2.6.12 (C:wamp64wwwvue-samplenode_modulesvue-template-compilerpackage.json )

Это может привести к неправильной работе. Убедитесь, что вы используете одну и ту же версию для обоих. Если вы используете vue-loader@>=10.0, просто обновите vue-template-compiler. Если вы используете vue-loader@<10.0 или vueify, повторная установка vue-loader / vueify должна привести к обновлению vue-template-compiler до последней версии.

@ ./resources/js/app.js 19:35-79 @ мульти ./resources/js/app.js ./ресурсы/sass/app.scss

Я совершенно новичок в Vue. Что мне делать?

Ответ №1:

Обновление 2022

введите описание изображения здесь

Для тех, кто предпочитает Vite, есть инструмент под названием Laravel Vite, который представляет собой проект, основанный на пакете PHP, плагине Vite и предустановке, вы можете установить его следующим образом :

 npx @preset/cli apply laravel:vite
  

Это приведет к удалению конфигурации по умолчанию в новом проекте Laravel.

Для получения дополнительной информации, пожалуйста, ознакомьтесь с другим разделом в официальных документах


Обновление октябрь 2020

Теперь laravel-mix v6 вы можете запускать код Vue 3 в приложении Laravel:

1. Установка :

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

затем

 npm i
  

перед этим попробуйте удалить следующие зависимости, из package.json которых некоторые из них добавлены php artisan ui vue :

  • vue
  • vue-template-compiler
  • laravel-mix

2. Настройка:

в package.json измените скрипты на следующие:

 "scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}
  

webpack.mix.js должен содержать :

 const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue();
  

Минимальное содержание resources/js/app.js

 import { createApp } from 'vue';
import App from './components/App.vue'
createApp(App).mount("#app")
  

Чтобы избежать этих запутанных шагов, клонируйте этот РЕПОЗИТОРИЙ и начните кодирование.

СТАРЫЙ ОТВЕТ

Laravel пока не поддерживает vue 3, но вы можете попробовать laravel-mix-vue3 :

Установка :

 npm install @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3  --save-dev
  

Использование :

Настройте webpack.mix.js следующим образом :

 const mix = require("laravel-mix");

require("laravel-mix-vue3");

mix.vue3("resources/js/app.js", "public/js");
  

Ответ №2:

Обновить

Laravel mix v6 сейчас находится в стадии бета-тестирования, воспользуйтесь приведенным здесь руководством для обновления и использования Vue v3.

Старый ответ

Вам не нужно использовать плагин vue3. Я начал работать следующим образом:

Установите Vue3, загрузчик Vue3 и компилятор:

 npm install vue@next vue-loader@next @vue/compiler-sfc
  

Затем в вашем app.js импорт vue из пакета esm:

 import { createApp } from 'vue/dist/vue.esm-bundler.js';
  

Затем создайте свое приложение и смонтируйте его:

 createApp({}).mount('#app')
  

Теперь просто создайте свои ресурсы, как обычно, с помощью mix

  npm run dev
  

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

1. Привет, @Rando, можете ли вы предоставить более подробную информацию? какую версию Laravel mix вы используете? можете ли вы поделиться своим package.json и своим webpack.mix.js файлы? Спасибо!

2. Когда я писал это, laravel-mix не обновлялся, теперь вы можете использовать mix6-beta для этого, проверьте эту ссылку

3. можете ли вы предоставить более подробные инструкции, такие как ваш package.json и webpack.mix.js файлы? Я попытался следовать инструкциям в вашей ссылке, и у меня это не сработало, особенно при попытке скомпилировать компонент ExampleTest.vue. Можете ли вы подтвердить, что это сработало? Я думаю, что Джеффри все еще пытается разобраться 🙂