在laravel里使用Vue实现简单的单页模式

已于 2022-02-13 10:11:47 修改
阅读量2.7k 收藏 7
点赞数
文章标签： vue.js laravel 前端 php
于 2022-02-12 18:23:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengliwang/article/details/122895316
版权

php版本：7.3.9
nginx版本：1.15.11
laravel版本：8.83

用composer创建一个laravel项目， 取名为test

composer create-project laravel/laravel test

进入test项目文件夹， 运行 composer install 补全依赖文件。
运行npm install生成node_modules依赖文件

如果出现报错 Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes) 则说明composer版本太低， 运行composer self-update或者composer self-update --2升级后再执行composer install

新建一个控制器， 取名为Pages

php artisan make:controller Pages

在控制器里写入下面的代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class Pages extends Controller
{
   
    public function index(){
   
        return view('spa');
    }
}

然后在resources/views文件夹里创建一个试图文件spa.blade.php 写入下面的代码
重点是<div id="app"></div> 指定要挂载的元素， 和 <script src="/js/app.js"></script> 引入js文件

<!doctype html>
<html lang="en">
<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>SPA测试</t
最低0.47元/天 解锁文章
牛顿就是牛
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于ThinkPhp6+Vue+ElementUI低代码开发平台
西里古里的博客
02-23 7935
一款 PHP 语言基于ThinkPhp6、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题，实现了个性化呈现的需求；
laravel 使用vue_使用Laravel和Vue构建聊天应用
culiu9261的博客
07-20 782
laravel 使用vueIt's been a while since I wrote about Laravel and thought I should do something fun with it. In this tutorial, I will show you how to build a web-based chat application using Laravel and ...
laravel+vue实现展示+删除（带vue图片展示和数据回收站）
windowserim的博客
05-12 661
Vue的核心思想是组件化，可以将界面拆分成多个组件，每个组件都独立维护自己的状态和行为，最终组合起来形成完整的用户界面。Laravel则是一款流行的后端 PHP 框架，它提供了一套完整的解决方案，包括路由、模板引擎、ORM（对象关系映射）、缓存、验证、队列等功能。Laravel的核心思想是简单、优雅、实用，通过提供一系列方便的工具、包和命令，让开发者可以更快地构建符合预期的应用程序。<el-table-column label="门店名称" prop="name" width="130" />
探索Laravue：Vue.js与Laravel的强大结合
最新发布
gitblog_00039的博客
04-23 443
探索Laravue：Vue.js与Laravel的强大结合 项目地址:https://gitcode.com/jianyuezhexue/Laravue 项目简介 Laravue是一个基于Laravel后端框架和Vue.js前端框架精心构建的现代化管理面板解决方案。它旨在提供一个优雅且高效的开发环境，让开发者可以快速构建出功能丰富的Web应用后台界面。该项目充分利用了两者的优势，提供了丰富的预设组...
使用 Laravel 和 Vue 创建单页应用程序
分享身边生活经验blog
08-26 223
单页应用程序（简称 SPA）将新数据从 Web 服务器动态加载到网页，而无需刷新整个页面。使用SPA的流行网站的例子包括 gmail.com 和 youtube.com - 换句话说，SPA在很大程度上无处不在。您可能每win8开机登录界面颜色怎么换？五个步骤轻松更换图文教程天使用的大多数管理仪表板都是使用 SPA 创建的。水疗的好处：用户体验更灵活在浏览器中缓存数据快速加载时间SPA的缺点：可能会损害 SEO（搜索引擎优化）潜在的安全问题消耗大量浏览器资源。
laravel vue使用
征途人生&梦
05-26 1652
首先安装vue和vue-router npm install vue npm install vue-router laravel默认已经有了axios，所以可以不用安装 第一步，建立3个文件 第一个文件App.vue 放在js/components目录下 <template> <div class=""> <div class="">vue demo</div> <router-view></router-v.
laravelvue-spa:用于构建Laravel API和Vue SPA的文档站点
05-01
**laravelvue-spa: 构建Laravel API与Vue单页应用的综合指南** **一、项目概述** `laravelvue-spa` 是一个基于 Laravel 和 Vue.js 的项目，旨在帮助开发者创建一个以API为中心的后端，配合Vue.js前端进行单页应用...
基于 layui 实现的单页面控台
03-24
1. **路由管理**: 在 layui 实现的单页面应用中，通常会借助 layui 的扩展插件或者第三方的路由库（如 vue-router 或者 react-router）来处理页面间的跳转。通过监听 URL 变化，根据不同的路径加载对应的模块或组件...
CashBook_Vue:使用laravel和vue.js测试spa
04-09
在CashBook_Vue项目中，Vue.js的路由系统和组件化特性使得实现SPA变得简单高效。 **项目结构与文件** CashBook_Vue-main目录下可能包含以下主要文件和目录： 1. `public` - 存放静态资源，如HTML、CSS和...
laravel-vue-boilerplate:Laravel 8 + Vue Boilerplate为SPA重新启动
03-17
**laravel-vue-boilerplate** 是一个基于 **Laravel 8** 和 **Vue.js** 的前端框架模板，特别设计用于快速开发单页应用程序（SPA）。这个项目将帮助开发者节省在构建新应用时进行基础设置的时间，使得他们可以更快地...
blog:Laravel + Vue 2 + Vue Router的博客系统
03-11
3. **Vue Router**：Vue Router允许我们定义路由规则，根据URL变化动态渲染视图，实现SPA（单页应用）的功能，提高页面加载速度。 4. **Markdown**：Markdown是一种简单的标记语言，用于格式化文本，使其看起来更...
基于Laravel + Vue + Element 实现 人力资源系统(考勤应用 )
10-16
Bee 是人力资源系统中的考勤应用，主要功能用于员工申请假单。接下来通过本文给大家介绍基于Laravel + Vue + Element 考勤应用 之 人力资源系统,需要的朋友可以参考下
基于 Laravel + Vue 类似知乎的问答社区
04-18
本项目使用 Laravel 5.3 和 Vue 开发，基于 laravist 社区 知乎系列项目，后台模板采用 AdminLTE-For_Laravel。
laravel使用vue进行后台管理的环境搭建
weixin_42265596的博客
10-13 1457
前言：小编的自学笔记，适合于新手，大神不喜勿喷 vue的相关知识了解----熟悉vue的可以跳过这一步 1.挂载 Vue创建的是spa(单页面)项目，一个项目仅在一个web页面中完成,也可以理解为一个项目就是一个vue实例，也就是通过new Vue()语句创建的对象。然后把这个实例放在HTML中显示出来，这就是挂载 new Vue({ // el是实例挂载点，会将根组件替换掉原文档中id为 app...
推荐开源项目：Laravel + Vue + iView 应用框架
gitblog_00059的博客
04-07 406
推荐开源项目：Laravel + Vue + iView 应用框架 项目地址:https://gitcode.com/donng/laravel-vue-iview 在前端开发中，找到一个高效且易于上手的框架是非常重要的。今天，我们要推荐的是 donng/laravel-vue-iview —— 这是一个基于 Laravel 后端、Vue.js 前端和 iView UI 框架构建的应用模板，它为...
vue + element-ui 聊天_通过 Laravel 创建一个 Vue 单页面应用（一）
weixin_39624700的博客
10-22 171
文章转发自专业的Laravel开发者社区，原始链接：https://learnku.com/laravel/t/34252使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。在此教程中，我们将学习如何构建并运行一个以 Vue 路由为前端，laravel 为后端的 SPA 应用。首先我们将注意力集中在编写每一个小的功能代码块上，然后在后续的教程...
laravel 使用 vue 和 element
aogouqian7476的博客
12-22 819
前提：确保你的电脑安装了 node 和 npm 1、安装 laravel5.7： composer create-project laravel/laravel --prefer-dist laravel "5.7.*" 2、laravel 自带 vue，所以只要在根目录下执行： npm install —— 执行该命令会自动安装 package.j...
laravel 使用 vue （gulp）
weixin_33724059的博客
02-14 121
1）首先要安装 gulp 看这里 http://www.cnblogs.com/tujia/p/6397779.html    2）编辑js 默认 laravel 里有一个 /resources/assets/js/app.js  这个 gulp 要编译文件，gulp 将 /resources/assets/js/app.js 编译成 /public/js/app.js 文件，/public/js...
php 使用 vue2,在 Laravel 中使用vue（二）
weixin_42515295的博客
03-21 265
上篇介绍了vue,以及在如何 Laravel 快速搭建vue环境。这篇讲如何在 Laravel 中更深入使用Vue。预处理vue还支持使用预处理工具，比如jade, sass等等。假设使用Stylus, Jade，那就npm install 一下呗npm install stylus jade --save-dev然后在vue文件中指定，你使用的预处理工具是什么.hello h1 Hello V...
怎么在laravel框架里使用vue
05-22
在 Laravel 中使用 Vue.js 可以通过以下几个步骤实现： 1. 在 Laravel 项目中安装 Node.js 和 NPM。 2. 安装 Laravel Mix。 ```bash npm install --save-dev laravel-mix ``` 3. 安装 Vue.js。 ```bash npm install --save vue ``` 4. 在 Laravel 项目的 resources/assets/js 目录中创建 Vue.js 组件。例如，可以创建一个名为 Example.vue 的组件。 ```html <template> <div> <h1>Hello World!</h1> </div> </template> <script> export default { data() { return { message: 'Hello World!', } } } </script> ``` 5. 在 Laravel 项目的 resources/assets/js/app.js 文件中引入 Vue.js 和创建的组件。 ```javascript require('./bootstrap'); import Vue from 'vue'; import Example from './components/Example.vue'; const app = new Vue({ el: '#app', components: { Example, } }); ``` 6. 在 Laravel 项目的 resources/views 目录中创建 Blade 模板。例如，可以创建一个名为 welcome.blade.php 的模板。 ```html <!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> <link rel="stylesheet" href="{{ mix('/css/app.css') }}"> </head> <body> <div id="app"> <example></example> </div> <script src="{{ mix('/js/app.js') }}"></script> </body> </html> ``` 7. 在 Laravel 项目的 routes/web.php 文件中定义路由。 ```php Route::get('/', function () { return view('welcome'); }); ``` 8. 运行 Laravel Mix 编译前端资源。 ```bash npm run dev ``` 9. 在浏览器中访问 http://localhost:8000 即可看到 Vue.js 组件在 Laravel 中的使用效果。 以上是在 Laravel 中使用 Vue.js 的基本步骤，根据实际情况进行适当调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值