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

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

我对 Vue 完全陌生。我该怎么办？

Answer 1

2022 年更新

喜欢Vite, there's a tool called Laravel Vite的人，这是一个基于PHP包，Vite插件和预设的项目，可以按如下方式安装：

npx @preset/cli apply laravel:vite

这将删除 Laravel 新项目中的默认配置。

更多详情请查看官方的不同部分docs

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 加载器和编译器：

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

在 laravel 安装 vue 3.0

Install vue 3.0 in laravel

laravel

vue.js

webpack

vue-component

vuejs3

更新

旧答案