在 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:wamp64wwwvue-sample ode_modulesvueindex.js)
• vue-template-compiler@2.6.12 (C:wamp64wwwvue-sample ode_modulesvue-template-compilerpackage.json)

这可能会导致工作不正常.确保使用相同的两个版本.如果您使用的是 vue-loader@>=10.0，只需更新vue 模板编译器.如果您使用的是 vue-loader@<10.0 或 vueify，重新安装 vue-loader/vueify 应该将 vue-template-compiler 提升到最新的.

@ ./resources/js/app.js 19:35-79 @ 多 ./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 添加的:

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

2.配置:

在 package.json 中将脚本更改为以下脚本:

脚本":{发展":混合"，手表":混合手表"，"watch-poll": "mix watch -- --watch-options-poll=1000",热":混合观看--热"，生产":混合-生产"}

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';从'./components/App.vue'导入应用程序createApp(App).mount("#app")

为了避免这个混乱的步骤，克隆这个REPOSITORY 并开始编码.

旧答案

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");要求(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:wamp64wwwvue-sample ode_modulesvueindex.js)
• vue-template-compiler@2.6.12 (C:wamp64wwwvue-sample ode_modulesvue-template-compilerpackage.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屋！