Collection
Collection
此文默认composer为全局安装（可察看相关文章，保证composer为全局安装）
如果已有项目，也可以使用，简单方法可以直接将laravel8文件夹中的文件直接复制到项目目录下。
如果没有项目，
使用artisan命令创建项目：
composer create-project laravel/laravel demo
其中的“demo”是自己项目的名称，可以是“lv8vue2”、“blog”、“spa”等等。
这里需要注意的是，引入laravel/ui是指项目引入，因此一定要切换到项目根目录
cd */*/demo
composer require laravel/ui
这里需要注意的是有的文章并没有交待清楚laravel8与vue2的关系，讲到vue-loader等问题时让人误认为需要安装vue-loader,可是自己安装的vue-loader与laravel8自带的vue出现兼容问题，总是会出些莫名其妙的错误，所以不用重新安装vue及相关组件，在使用vue及相关组件时只需要初始化就可以了
php artisan ui vue
vue初始化完成以后，项目根目录下的package.json中devDependencies内容会增加vue及相关组件
"vue-loader": "^15.9.6","vue-router": "^3.5.1","vue-template-compiler": "^2.6.10"
安装完成后，Vue组件和JS文件在resources/js目录下；
当然，laravel8是自动生成的，无需自己动手改造。
require('./bootstrap');window.Vue = require('vue');// 注册组件Vue.component('example-component', require('./components/ExampleComponent.vue').default);// 挂载实例const app = new Vue({el: '#app',});
<template><div class="container"><div class="jumbotron">这里是我的第一个laravel+vue单页</div></div></template><script>export default {// 导出组件name:'DemoComponent'}</script><style scoped></style>
此时的app.js应该是这样的：
require(‘./bootstrap’);
window.Vue = require('vue');// 注册组件//Vue.component('example-component', require('./components/ExampleComponent.vue').default);Vue.component('demo-component', require('./components/DemoComponent.vue').default);// 挂载实例const app = new Vue({el: '#app',});
`<!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Laravel</title><!--1、 引入支持 Bootstrap 的 CSS 样式文件 --><link href="{{ asset('css/app.css') }}" rel="stylesheet"></head><body><div id="app"><div><!-- 3、使用组件 --><demo-component></demo-component></div></div><!-- 2、引入支持Vue框架和Vue组件的app.js文件 --><script src="{{ asset('js/app.js') }}"></script></body></html>`
Route::get(‘/{any}’, [SpaController::class,’index’])->where(‘any’, ‘.*’);
npm install
npm run dev
原来的欢迎视图改造后如下：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
