#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. Можете ли вы подтвердить, что это сработало? Я думаю, что Джеффри все еще пытается разобраться 🙂