laravel - 我如何设置 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 command not found

所以我尝试使用 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 proejct 分开)，它作为前端可以更好地独立工作，并通过类似于 Laravel 制作的 HTTP API 之类的东西与你的后端对话。

选项 2:Laravel 8 Breeze + Inertia
Breeze 是 Laravel 8 的新 UI 包，它使用 Tailwind CSS。 Inertia.js 是一个使用 Laravel 服务器端路由和 Controller 的包。
要在新的 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 存储库中的文档:
https://github.com/laravel/ui