在Laravel中安装Vue 3.0 [英] Install vue 3.0 in laravel

问题描述

是否可以将vue 3.0安装到Laravel 8?当我跑步

  npm install vue @ next 

它开始安装Vue 3.0，但由于某种原因，它也开始安装 vue-template-compiler v2.6.12.出现以下内容:

 必须安装其他依赖项.这只需要一点时间.运行:npm install vue-template-compiler --save-dev --production = false 

然后我跑步时

  npm run dev 

出现以下错误:

• vue@3.0.0(C:\ wamp64 \ www \ vue-sample \ node_modules \ vue \ index.js)
• vue-template-compiler@2.6.12(C:\ wamp64 \ www \ vue-sample \ node_modules \ vue-template-compiler \ package.json)

这可能会导致事情无法正常运行.确保使用相同的两者的版本.如果您使用的是vue-loader @> = 10.0，只需更新Vue模板编译器.如果您使用的是vue-loader @< 10.0或vueify，重新安装vue-loader/vueify应该将vue-template-compiler撞到最新的.

@ ./resources/js/app.js 19:35-79 @ multi ./resources/js/app.js./resources/sass/app.scss

我对Vue完全陌生.我该怎么办?

解决方案

更新2020年10月

现在使用 laravel-mix v6 您可以在Laravel App中运行Vue 3代码:

1.安装:

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

然后

  npm i 

在执行此操作之前，尝试从 package.json 中删除以下依赖项，其中某些依赖项是由 php artisan ui vue 添加的:/p>

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

2.配置:

package.json 中的

将脚本更改为以下脚本:

 "scripts":{开发":混合"，手表":混合手表"，"watch-poll":"mix watch---watch-options-poll = 1000"，"hot":"mix watch --hot"，生产":混合-生产"；} 

webpack.mix.js 应该包含:

  const mix = require('laravel-mix');mix.js('resources/js/app.js'，'public/js').vue(); 

resources/js/app.js

的最低内容

 从'vue'导入{createApp};从"./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")； 

Is there a way to install vue 3.0 to Laravel 8? When I run

npm install vue@next

It started installing Vue 3.0, but for some reason it also began installing vue-template-compiler v2.6.12. The following appears:

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

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

And then when I run

npm run dev

The following error appears:

• vue@3.0.0 (C:\wamp64\www\vue-sample\node_modules\vue\index.js)
• vue-template-compiler@2.6.12 (C:\wamp64\www\vue-sample\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

@ ./resources/js/app.js 19:35-79 @ multi ./resources/js/app.js ./resources/sass/app.scss

I am completely new in Vue. What should I do?

解决方案

Update October 2020

Now with laravel-mix v6 you could run Vue 3 code in Laravel App:

1. Installation :

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

then

npm i

before doing that try to remove the following dependencies from package.json which some of them are added by php artisan ui vue :

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

2. Config:

in the package.json change the scripts to the following ones:

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

webpack.mix.js should contain :

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

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

The minimum content of resources/js/app.js

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

In order to avoid this confusing steps clone this REPOSITORY and start coding.

OLD ANSWER

Laravel doesn't support vue 3 yet, but you could try out laravel-mix-vue3 :

Installation :

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

Usage :

Configure in webpack.mix.js as follows :

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

require("laravel-mix-vue3");

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

这篇关于在Laravel中安装Vue 3.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！