在Laravel项目中使用vue - PHP编程

首页 > 博客列表 > 在Laravel项目中使用vue

博主信息

博文 48

粉丝 0

访问量 58039

专题推荐

更多>

下载laravel框架

php composer.phar create-project --prefer-dist laravel/laravel laravel10 10.*

因为composer没有全局安装，这里使用composer.phar文件进行操作，如果全局安装了composr,把上面的php composer.phar 替换成composer就可以了。

这时安装的是laravel10的版本，laravel11也可以适用本文件的操作，laravel9不可以，使用laravel9时，在安装vue插件时有错误。

安装依赖和Vue插件

npm install

安装Vue插件

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']),
    ],
});

在views目录下新建blade文件，文件名为`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>

修改 routes目录下的web.php文件

Route::get('{path}',function (){
    return view('spa');
})->where('path','(.*)');

运行

npm run dev

php artisan serve

这时在浏览器的地址栏中输入http://127.0.0.1:8000就可以看到运行效果。

如果要进行路由组件开发，还要继续进行。

路由组件开发

安装Vue中的路由管理器 Vue-Router

npm install vue-router@4 --save

创建路由组件

在resources/js文件夹中，创建文件夹compnents/pages,该文件夹中存入路由组件。在pages文件夹中新建Home(首页)和About（关于）两个组件。

Home.vue

<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>

About.vue

<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;

修改app.js

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');

在根组件APP.vue中添加路由视图

<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>是路由链接标签

运行效果

访问Laravel接口

运行命令，创建控制器AboutController

php artisan make:controller api/AboutController

在控制器中定义方法index

<?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搭建的单页面应用',
        ]);
    }
}

修改文件routes/api.php，添加代码

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;

组件文件About.vue

<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>

运行效果

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

常用Vscode 插件

2021-09-18 19:52:08