如何设置 Vue 3 + Laravel 8

Question

我想在 Blade 模板中使用 Vue 3 组件/vue 文件。我花了一整天的时间试图让它工作，所以这是我最后的希望。我试着看视频教程，我试着阅读文档，我已经尝试了几乎所有的东西。

我首先尝试使用 npm 安装 Vue：npm install vue，但我被告知这还不够；我必须使用 Vue CLI 才能使用 components/.vue 文件，因为 CLI 附带所有编译器和 webpack 配置。

这就是我所做的：

npm install -g @vue/cli

但它没有用，它给了我一个错误：

找不到 Vue 命令

所以我尝试使用npx:

npx @vue/cli create myApp

这行得通，但它像一个单独的应用程序一样启动服务器，在不同于我的 Laravel 应用程序的不同 url 上。我知道这是预期的行为，这就是为什么我整天都在寻找解决方案的原因。

我也尝试过 laravel/ui，但它似乎在 Laravel 8 中不起作用。

我尝试手动设置我的 Laravel+ Vue 应用程序，但也没有用：

mix.js('resources/assets/js/main.js', 'public/js');

在我的main.js 文件中

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

它说Vue无法解决。

我的问题是：

如何在 Blade 模板中使用/调用 Vue 组件？欢迎任何想法。

Answer 1

有几个选项可以将 Vue 与 Laravel 集成。

选项 1：Vue CLI 使用 VueCLI，您将安装一个全新的 Vue 项目（从 Laravel 项目中分离出来），该项目可以更好地作为前端独立运行，并通过类似于使用 Laravel 制作的 HTTP API 与您的后端对话。

---

选项 2：Laravel 8 Breeze + Inertia Breeze 是 Laravel 8 的新 UI 包，它使用 Tailwind CSS。 Inertia.js 是一个使用 Laravel 服务端路由和控制器的包。

在你的新 Laravel 项目中运行安装：

composer require laravel/breeze --dev

php artisan breeze:install --inertia

npm install

npm run dev

php artisan migrate

请参考 Laravel 文档了解这些包的安装：https://laravel.com/docs/8.x/starter-kits#laravel-breeze-installation

---

选项 3：Laravel 用户界面 Laravel 8 仍然支持这个包。如果你有全新安装的 Laravel，只需运行：

composer require laravel/ui

然后运行：

// Basic scaffolding
php artisan ui vue

// login / registration scaffolding
php artisan ui vue --auth

请参考 GitHub repo 中的文档： https://github.com/laravel/ui