登录  /  注册
博主信息
博文 48
粉丝 0
评论 3
访问量 55014
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
在Laravel项目中使用vue
江流
原创
246人浏览过

下载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文件

  1. import { defineConfig } from 'vite';
  2. import laravel from 'laravel-vite-plugin';
  3. import vue from '@vitejs/plugin-vue'; //新增
  4. export default defineConfig({
  5. plugins: [
  6. vue(), //新增
  7. laravel(['resources/js/app.js', 'resources/css/app.css']),
  8. ],
  9. });

在views目录下新建blade文件,文件名为spa.blade.php

  1. <!doctype html>
  2. <html lang="{{str_replace('_','-',app()->getLocale())}}">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>后台管理</title>
  9. @vite('resources/js/app.js')
  10. </head>
  11. <body>
  12. <div id="app"></div>
  13. </body>
  14. </html>

@vite('resources/js/app.js') 是设置入口文件,这里要和vite.config.js文件中的laravel(['resources/js/app.js', 'resources/css/app.css']),设置一致。

修改resources/js文件夹中的app.js文件

  1. import './bootstrap';
  2. import { createApp } from 'vue';
  3. import App from './App.vue';
  4. const app = createApp(App);
  5. app.mount('#app');

这里的app.js文件相当在使用vite进行行vue开发时的main.js文件。

通过以上设置文件夹resources/js,成为一个vue的开发文件夹,关于vue编码的文件将放在该文件夹中。

在文件夹resources/js中新建一个app.js文件

  1. <script setup>
  2. </script>
  3. <template>
  4. <h2>App根组件</h2>
  5. </template>
  6. <style scoped>
  7. </style>

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

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

运行

  1. npm run dev
  1. 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
  1. <script setup>
  2. </script>
  3. <template>
  4. <div class="container">
  5. <h2> Vue Home组件</h2>
  6. </div>
  7. </template>
  8. <style scoped>
  9. .container{
  10. min-height: 160px;
  11. background-color: #f0f0f0;
  12. padding: 20px;
  13. }
  14. </style>
  • About.vue
  1. <script setup>
  2. </script>
  3. <template>
  4. <div class="container">
  5. <h2> Vue About组件</h2>
  6. </div>
  7. </template>
  8. <style scoped>
  9. .container{
  10. min-height: 160px;
  11. background-color: #f0f0f0;
  12. padding: 20px;
  13. }
  14. </style>
定义路由文件

resources/js文件夹中,创建文件夹router,在router中新建index.js路由文件。

  1. import {createRouter,createWebHistory} from "vue-router";
  2. const index=createRouter({
  3. history:createWebHistory(),
  4. routes:[
  5. {
  6. path:"//home",
  7. component:()=>import("../components/pages/Home.vue")
  8. },
  9. {
  10. path:"/about",
  11. component:()=>import("../components/pages/About.vue")
  12. }
  13. ]
  14. })
  15. export default index;
修改app.js
  1. import './bootstrap';
  2. import { createApp } from 'vue';
  3. import App from './App.vue';
  4. import router from './router/index.js';
  5. const app = createApp(App);
  6. app.use(router)
  7. app.mount('#app');
在根组件APP.vue中添加路由视图
  1. <script setup>
  2. </script>
  3. <template>
  4. <h2>App根组件</h2>
  5. <p>
  6. <router-link to="/home">Home</router-link>
  7. <router-link to="/about">About</router-link>
  8. </p>
  9. <router-view></router-view>
  10. </template>
  11. <style scoped>
  12. a{
  13. margin-right: 10px;
  14. }
  15. a.router-link-active{
  16. color: lightseagreen;
  17. }
  18. </style>

<router-view>是路由视图标签, <router-link>是路由链接标签

运行效果

访问Laravel接口

  • 运行命令,创建控制器AboutController

php artisan make:controller api/AboutController

  • 在控制器中定义方法index
  1. <?php
  2. namespace App\Http\Controllers\api;
  3. use App\Http\Controllers\Controller;
  4. use Illuminate\Http\Request;
  5. class AboutController extends Controller
  6. {
  7. //
  8. public function index(){
  9. return response()->json([
  10. 'title' => 'laravel-vue-spa',
  11. 'ver' => '0.0.1',
  12. 'author' => '江湖人称小白',
  13. 'description' => '这是一个使用laravel和vue搭建的单页面应用',
  14. ]);
  15. }
  16. }
  • 修改文件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
  1. import axios from "axios";
  2. const request = axios.create({
  3. baseURL: "/api",
  4. timeout: 1000,
  5. })
  6. export default request;
  • 组件文件About.vue
  1. <script setup>
  2. import request from '../../axios/request.js'
  3. import {toRef} from 'vue'
  4. const about= toRef({})
  5. request({
  6. method:'get',
  7. url:'about'
  8. }).then((res)=>{
  9. about.value=res.data
  10. console.log(about.value ,about.value.title)
  11. }).catch((err)=> {
  12. console.log(err)
  13. })
  14. </script>
  15. <template>
  16. <div class="container">
  17. <h2> Vue About组件</h2>
  18. <p>{{about.title}}</p>
  19. <p>{{about.ver}}</p>
  20. <p>{{about.author}}</p>
  21. <p>{{about.description}}</p>
  22. </div>
  23. </template>
  24. <style scoped>
  25. .container{
  26. min-height: 160px;
  27. background-color: #f0f0f0;
  28. padding: 20px;
  29. }
  30. </style>

运行效果

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学