如何在 Laravel 8 中安装 Vue.js
Posted
技术标签:
【中文标题】如何在 Laravel 8 中安装 Vue.js【英文标题】：How to Install Vue.js in Laravel 8 【发布时间】：2020-12-30 08:55:33 【问题描述】：我正在使用laravel 8，现在我想安装Vue.js。我正在尝试这样
composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
【问题讨论】：
【参考方案1】：你可以试试npm install --save vue
【讨论】：
好的，谢谢，我可以使用 vue 代替 livewire 对吗？【参考方案2】：更新：如果你想在你的 Laravel ^8.0 应用程序中完全避免 Inertia / Livewire (Alpine.js) 脚手架并改用 Vue - 安装 Laravel UI，它很可能会无限期维护（缩放到实用软件生命周期）。
在 Laravel 应用中安装 Vue（和旧的 auth 脚手架）的说明：
-
运行
composer require laravel/ui
运行 php artisan ui vue 来安装 Vue。
运行 php artisan ui vue --auth 以搭建身份验证视图。
运行npm install && npm run dev
但是，如果您仍想将 Vue.js 与 Livewire 脚手架一起使用，请使用以下说明。
重要提示：请注意，Vue.js 在安装后会控制 DOM，分离节点并替换它，删除其他 JS 侦听器。因此，如果您在与 Vue 相同的页面上使用 Livewire，Alpine.js 附带的 Livewire 脚手架将无法工作。作为一种解决方法，您可以使用Livewire VueJS support plugin.
运行npm install --save vue
将以下内容添加到您的资源/js/app.js：
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue(
el: '#app',
);
在resources/js/components目录下创建一个ExampleComponent.vue
<template>
<div>Hello World.</div>
</template>
<script>
export default
mounted()
console.log("Example component mounted");
;
</script>
在布局文件的<head> 部分添加<script src=" asset('js/app.js') " defer></script> (resources/views/layouts/app.blade.php)
在布局文件中将id="app" 添加到<body> 或主<div> (resources/views/layouts/app.blade.php)
将<example-component /> 添加到您的视图中
运行npm run dev 或npm run watch
最后，打开开发工具，在控制台日志中你应该会看到Example component mounted
【讨论】：
你救了我的命，tks！呵呵【参考方案3】：在 laravel 8 项目中运行以下命令来安装 vue.js
-
运行
composer require laravel/ui
安装Vuephp artisan ui vue
使用身份验证安装 Vue php artisan ui vue --auth
运行npm install && npm run dev
【讨论】：
【参考方案4】：在 Laravel 中设置 Vue
-
运行
composer require laravel/ui
安装Vuephp artisan ui vue
如果您使用 auth 安装 Vue，请使用 php artisan ui vue --auth
在页面母版之后添加
运行npm install
运行npm run dev
运行PHP artisan serve
【讨论】：
【参考方案5】：您可以通过三种不同的方式在您的 laravel 项目中安装 Vue 3：
-
在页面上将其作为CDN包导入
下载 javascript 文件并自行托管
使用 npm 安装它
1。通过 CDN
在您的 html 文件中包含以下代码：
<script src="https://unpkg.com/vue@next"></script>
或使用以下链接进行制作：
https://cdnjs.com/libraries/vue
2。自行下载和托管：
在此处从 GitHub 下载：
https://github.com/vuejs/vue-next
3。通过 npm
npm 是使用 Vue 构建大型应用程序时推荐的安装方法。它与 Webpack (opens new window) 或 Rollup (opens new window) 等模块捆绑器很好地搭配。 Vue 还提供了用于创作单文件组件的随附工具。
在终端中运行此命令以获取最新的稳定版本
$ npm install vue@next
接着是：
npm install
【讨论】：
毫无疑问，选项 3 是最好的选择。【参考方案6】：您可以在 laravel 8 上安装 vue，只需运行以下命令即可安装 laravel ui：
composer require laravel/ui
如果您想要登录页面、注册页面脚手架等授权，请从安装 laravel 项目的文件夹中运行以下命令：
php artisan ui vue
运行上述命令后，运行安装所有依赖项并编译所有样式资源：
npm install
npm run dev
npm run watch
【讨论】：
【参考方案7】：我为此浪费了很多时间，不想让人们经历同样的事情，所以我将教你如何安装 Vue.js 并使其快速运行。
如果你想从头开始
将LaravelProject 替换为您的项目名称
laravel new LaravelProject
在你的 Laravel 8 应用程序上安装 Vue.js
运行以下命令
composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install
npm run dev
npm run watch
现在您已经安装了所需的一切，转到刀片视图并在 <body></body> 中添加以下代码
<div id="app">
<example-component />
</div>
<script src=" mix('/js/app.js') "></script>
如果您做对了所有事情，您将在视图渲染中看到以下文本
Example Component
Im an example component.
在您的控制台中：
Component mounted.
【讨论】：
如果我这样做，我不需要用户身份验证，因为我正在以另一种方式执行此操作，只是不运行 'php artisan ui vue --auth' 对吗？【参考方案8】：运行命令
npm install vue
在资源/js/bootstrap.js中
window.Vue = require("vue/dist/vue.min");
然后运行命令
npm run dev
【讨论】：
【参考方案9】：在现有的 Laravel 8 项目中，最好在一行中进行此安装：
npm i -D vue@next @vue/compiler-sfc vue-loader@next
为了让您的项目正常工作，检查webpack.mix.js 也很重要，它应该是这样的：
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
在处理项目时不要忘记：
npm run watch
希望对您有所帮助！
【讨论】：
【参考方案10】：**安装 Vue + Laravel 8
composer create-project laravel/laravel projectName --prefer-dist
composer require laravel/ui
php artisan ui vue
npm install
npm run dev
npm i vue-loader
npm install vue-router vue-axios
npm run dev
成功了。
【讨论】：
以上是关于如何在 Laravel 8 中安装 Vue.js的主要内容，如果未能解决你的问题，请参考以下文章
在 Laravel 8 中安装 Laravel/ui 的问题