php composer.phar create-project --prefer-dist laravel/laravel laravel10 10.*
因为composer没有全局安装,这里使用composer.phar文件进行操作,如果全局安装了composr,把上面的php composer.phar
替换成composer
就可以了。
这时安装的是laravel10的版本,laravel11也可以适用本文件的操作,laravel9不可以,使用laravel9时,在安装vue插件时有错误。
npm install
npm install --save-dev @vitejs/plugin-vue
vite.config.js
文件
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; //新增
export default defineConfig({
plugins: [
vue(), //新增
laravel(['resources/js/app.js', 'resources/css/app.css']),
],
});
spa.blade.php
<!doctype html>
<html lang="{{str_replace('_','-',app()->getLocale())}}">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后台管理</title>
@vite('resources/js/app.js')
</head>
<body>
<div id="app"></div>
</body>
</html>
@vite('resources/js/app.js')
是设置入口文件,这里要和vite.config.js
文件中的laravel(['resources/js/app.js', 'resources/css/app.css']),
设置一致。
resources/js
文件夹中的app.js文件
import './bootstrap';
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
这里的app.js文件相当在使用vite进行行vue开发时的main.js文件。
通过以上设置文件夹resources/js
,成为一个vue的开发文件夹,关于vue编码的文件将放在该文件夹中。
resources/js
中新建一个app.js
文件
<script setup>
</script>
<template>
<h2>App根组件</h2>
</template>
<style scoped>
</style>
Route::get('{path}',function (){
return view('spa');
})->where('path','(.*)');
npm run dev
php artisan serve
这时在浏览器的地址栏中输入http://127.0.0.1:8000
就可以看到运行效果。
如果要进行路由组件开发,还要继续进行。
npm install vue-router@4 --save
在resources/js
文件夹中,创建文件夹compnents/pages,该文件夹中存入路由组件。在pages文件夹中新建Home(首页)和About(关于)两个组件。
<script setup>
</script>
<template>
<div class="container">
<h2> Vue Home组件</h2>
</div>
</template>
<style scoped>
.container{
min-height: 160px;
background-color: #f0f0f0;
padding: 20px;
}
</style>
<script setup>
</script>
<template>
<div class="container">
<h2> Vue About组件</h2>
</div>
</template>
<style scoped>
.container{
min-height: 160px;
background-color: #f0f0f0;
padding: 20px;
}
</style>
在resources/js
文件夹中,创建文件夹router,在router中新建index.js
路由文件。
import {createRouter,createWebHistory} from "vue-router";
const index=createRouter({
history:createWebHistory(),
routes:[
{
path:"//home",
component:()=>import("../components/pages/Home.vue")
},
{
path:"/about",
component:()=>import("../components/pages/About.vue")
}
]
})
export default index;
import './bootstrap';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index.js';
const app = createApp(App);
app.use(router)
app.mount('#app');
<script setup>
</script>
<template>
<h2>App根组件</h2>
<p>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</p>
<router-view></router-view>
</template>
<style scoped>
a{
margin-right: 10px;
}
a.router-link-active{
color: lightseagreen;
}
</style>
<router-view>是路由视图标签, <router-link>是路由链接标签
运行效果
php artisan make:controller api/AboutController
<?php
namespace App\Http\Controllers\api;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class AboutController extends Controller
{
//
public function index(){
return response()->json([
'title' => 'laravel-vue-spa',
'ver' => '0.0.1',
'author' => '江湖人称小白',
'description' => '这是一个使用laravel和vue搭建的单页面应用',
]);
}
}
Route::get('about',[\App\Http\Controllers\api\AboutController::class,'index']);
接口就创建完成了,可以使用postman测试一下。因为这是一个get请求,也可以使用浏览器。在浏览器地址栏输入http://127.0.0.1:8000/api/about
,进行测试。
因为在安装依赖时,已经安装为axios,我们不必重复安装,直接使用。
resources/js
文件夹中,创建axios文件夹,并新建文件request.js
import axios from "axios";
const request = axios.create({
baseURL: "/api",
timeout: 1000,
})
export default request;
<script setup>
import request from '../../axios/request.js'
import {toRef} from 'vue'
const about= toRef({})
request({
method:'get',
url:'about'
}).then((res)=>{
about.value=res.data
console.log(about.value ,about.value.title)
}).catch((err)=> {
console.log(err)
})
</script>
<template>
<div class="container">
<h2> Vue About组件</h2>
<p>{{about.title}}</p>
<p>{{about.ver}}</p>
<p>{{about.author}}</p>
<p>{{about.description}}</p>
</div>
</template>
<style scoped>
.container{
min-height: 160px;
background-color: #f0f0f0;
padding: 20px;
}
</style>
运行效果
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号