将 vue js 添加到几乎可以生产的 Laravel 应用程序答案

【问题标题】：Adding vue js to an almost production-ready Laravel application将 vue js 添加到几乎可以生产的 Laravel 应用程序
【发布时间】：2020-11-19 19:50:04
【问题描述】：

我有一个几乎可以投入生产的 Laravel 应用程序（V6）。我正在添加功能，但我想使用 Vue JS 添加其中一些功能。应用程序的前端在 bootstrap-UI 中实现。有人可以帮我弄清楚如何将 Vue 添加到 Laravel 应用程序中吗？提前感谢您的帮助????

【问题讨论】：

Laravel 6 应该开箱即用 Vue。看resources/assets/js/components/Example.vue
@CUGreen，没有资产文件夹。但我认为这取决于某人在设置时选择的 UI。如果我没记错？
啊，是的，对不起，正确的。请参阅@altiskes 答案

标签： javascript laravel vue.js laravel-6

【解决方案1】：

我建议阅读有关 Laravel Mix 的文档。这是一个融入 Laravel 框架的前端框架。

https://laravel.com/docs/7.x/frontend#introduction

我建议您首先在虚拟项目或不同的 GIT 分支中尝试一下。

您可以使用以下命令生成基本设置：

php artisan ui vue

【讨论】：

运行php artisan ui vue ``` ErrorException 时出现此错误：复制（C:\xampp\htdocs\freelance\bet\Files\core\resources\sass/_variables.scss）：失败打开流：C:\xampp\htdocs\freelance\bet\Files\core\vendor\laravel\ui\src\Presets\Bootstrap.php:4 ``` 中没有这样的文件或目录
我认为您删除了位于目录资源/sass 中的原始文件。 Laravel 通常会默认安装 Bootstrap。尝试运行 $ php artisan ui bootstrap
同样的错误我创建了那些目录但没有区别
嗯，我建议为这个问题创建一个关于堆栈溢出的单独票证。

【解决方案2】：

我终于通过几个步骤让它工作了。首先我安装了 Laravel UI composer require laravel/ui "^1.2" 记住它是“1.2”，因为 Laravel 版本是 6，2.0 版本会抛出这个错误：How to solve problems while installing ui in laravel? 然后我创建了以下文件夹和文件（仅当它们在您的应用程序中不存在时资源文件夹（resources/js/app.js、resources/sass/_variables.scss 和 resources/sass/app.scss），如下所述： https://laravel-news.com/laravel-5-7-resources-directory-changes, [注意这个结构与版本 7 不同。] 然后我将 webpack.mix.js 更新如下：

let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')


.sass('resources/sass/app.scss', 'public/css');

之后，我运行了安装 vue ui 的 php artisan ui vue，最后我运行了 npm i && npm run dev，仅此而已。如果 sass-loader 抛出错误，请卸载并安装版本 7。也就是说，如果您使用的是 Laravel V6，就是这样！希望这对可能遇到同样情况的人有所帮助。

【讨论】：