如何设置Vue 3 + Laravel 8

Question

我想在刀片模板中使用Vue 3组件/Vue文件。我花了一整天的时间想把它修好，所以这是我最后的希望了。我试着看视频教程，我试着阅读文档，我几乎什么都试过了。

我第一次尝试使用npm:npm install vue安装Vue，但我被告知这还不够;为了使用组件，我必须使用Vue CLI。

我就是这么做的:

npm install -g @vue/cli

但是它没有工作，它给了我一个错误:

Vue命令未找到

所以我尝试使用npx:

npx @vue/cli create myApp

这工作，但它启动服务器像一个独立的应用程序，在不同的url上，而不是我的Laravel应用程序。我知道这是预期的行为，这就是为什么我已经花了一整天的时间试图找到一个解决方案。

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

我尝试手动设置我的Laravel+ Vue应用程序，但也不工作:

mix.js("资源/资产/js/main.js"、"公共/js");

在我的main.js文件中

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

显示Vue无法解析

问题是:

如何在刀片模板中使用/调用Vue组件?欢迎提出任何意见。

Answer 1

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

选项1:Vue CLI使用VueCLI，你将安装一个全新的Vue项目(从Laravel项目中分离出来)，它作为前端可以更好地独立工作，并通过类似于用Laravel制作的HTTP API与你的后端进行通信。

---

选项2:Laravel 8 Breeze + InertiaBreeze是Laravel 8的新UI包，它使用了顺风CSS。jquery是一个使用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 UI这个包仍然被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