在 Laravel 中安装 vue 3.0

Question

有没有办法将 vue 3.0 安装到 Laravel 8？当我跑

npm install vue@next

它开始安装 Vue 3.0，但出于某种原因，它也开始安装vue-template-compilerv2.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-template-compiler。如果您使用的是 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 的新手。我该怎么办？

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 现在处于测试阶段，请使用此处的指南升级和使用 Vue v3。

旧答案

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

安装 Vue3、Vue3 加载器和编译器：

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