在 laravel 中安装 vue 3.0

Question

有没有办法将 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:\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@

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

我是 Vue 的新手。我该怎么办？

Answer 1

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 中将脚本更改为以下脚本：

"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")

为了避免这些令人困惑的步骤，请克隆此 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");

require("laravel-mix-vue3");

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

Answer 2

更新

Laravel mix v6 现在处于测试阶段，使用指南 here 升级和使用 Vue v3。

旧答案

您不需要使用 vue3 插件。我的工作如下：

安装Vue3、Vue3 loader和编译器：

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

然后在你的 app.js 中从 esm 包中导入 vue：

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

然后创建您的应用并安装它：

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

现在只需像往常一样使用 mix 构建您的资产

 npm run dev