laravel是否内置了vue

laravel是否内置了vue

laravel没有内置vue;laravel是使用PHP语言编写的网页程序开发框架,而vue是一个用于创建用户界面的开源JavaScript框架,可以在laravel中部署vue,但是laravel中并不存在内置vue。

本文操作环境:Windows10系统、Laravel9版、Dell G3电脑。

laravel内置了vue吗

Laravel 是使用 PHP 语言编写的网页程序开发框架,目的是为开发者提供常用组件,简化网页程序的开发。只需编写较少的代码,就能实现其他编程语言或框架难以企及的功能。经验丰富的 PHP 程序员会发现,Laravel 让程序开发变得更有乐趣。

vue是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架;Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。

Laravel

Laravel 是一套富有表达性且具有简洁语法的网页应用程序框架。我们认为开发过程应该是愉悦且有创造性的体验。Laravel 努力减少开发过程中的不便,因此我们提供了验证(authentication)、路由(routing)、sessions、缓存(caching)等开发过程中经常用到的工具或功能。

Laravel 目标是给开发者创造一个愉快的开发过程,并且不牺牲应用程序的功能性。快乐的开发者才能创造最棒的代码。为了这个目的,我们竭取了各框架的优点集中到 Laravel 中,这些框架包括并不局限于 Ruby on Rails、ASP.NET MVC 和 Sinatra 等。

vue

Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明,Vue有着89%的开发者满意度。在GitHub上,该项目平均每天能收获95颗星,为Github有史以来星标数第3多的项目。

Vue.js是一款流行的JavaScript前端框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。

怎么在Laravel中部署vue

创建laravel

首先,你要有一个composer,然后,你便有了一个laravel。 运行命令composer create-project –prefer-dist laravel/laravel blog创建一个新的laravel项目(具体创建laravel请到官网学习)。

Hello world!

打开命令行,进入你的项目内cd blog

在开始前,由于各种你懂得原因,npm作为国外的node仓库安装工具,操作的时候可能会发生速度慢等各种问题,一般推荐用taobao源进行加速,后面代码同样加上后缀即可,下载项目默认依赖,代码如下。

npm install  --registry=https://registry.npm.taobao.org

下载vue路由管理,代码如下。

npm install vue-router --save-dev

在/resources/assets/js/components中新建一个HelloComponent.vue自定义组件文件,代码如下。

<template>    <div>        <h2>Hello World!</h2>    </div></template><script>    export default{        data(){            return {            }        }    }</script>

在/resources/assets/js下新建文件夹router,并在里面新建hello.js,并通过嵌套路由配置将hello路由映射到刚刚新创建的HellowComponent组件当中,代码如下。

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)export default new VueRouter({    saveScrollPosition: true,    routes: [        {            name: "hello",            path: '/',            component: resolve =>void(require(['../components/HelloComponent.vue'], resolve))        },    ]})

在当前laravel项目中/resources/assets/js下新建hello.vue,做为主界面,嵌套路由视图,代码如下。

<template>    <div>        <h2>Hello</h2>        <router-view></router-view>    </div></template><script>    export default{        data(){            return {            }        }    }</script>

接着在/resources/assets/js下新建hello.js,代码如下。

require('./bootstrap');window.Vue = require('vue');import Vue from 'vue'import App from './hello.vue'import router from './router/hello.js'const app = new Vue({    el: '#app',    router,    render: h=>h(App)});

在/resources/views下新建hello.blade.php,代码如下。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="csrf-token" content="{{ csrf_token() }}">    <title>Hello</title></head><body>    <div id="app"></div>    <script src="{{ mix('js/manifest.js') }}"></script>    <script src="{{ mix('js/vendor.js') }}"></script>    <script src="{{ mix('js/hello.js') }}"></script></body></html>

在/resources/routes/web.php中新增路由,代码如下。

Route::view(‘/hello’,’/hello’);

修改webpack.mix.js,代码如下。

mix.js('resources/assets/js/app.js', 'public/js')   .js('resources/assets/js/hello.js', 'public/js')   .extract(['vue', "vue-router", "axios"])   .sass('resources/assets/sass/app.scss', 'public/css');

保存后在命令行中本项目目录下执行npm run watch,进行重新编译

可以在命令行中本项目目录下输入php artisan serve,访问http://127.0.0.1:8000/hello即可看到效果

laravel5.5起新增了Route::view和Route::redirect方法,5.4及以下的路由可以写成这样Route::get(‘/hello’, function () {return view(‘hello’);})。

读到这里,这篇“laravel是否内置了vue”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

文章标题:laravel是否内置了vue,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/22154

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月1日 下午11:05
下一篇 2022年9月1日

相关推荐

  • 怎么用Vue+java实现时间段的搜索

    实现效果如图: 标红的是需要注意的地方!Vue操作:1,如图: 2,如图:(数据初始化) 2.0初始化今天的日期和时间的样式: 2.1今天的日期: // 时间范围&ndash;start// daterangeLastInTime: [],// daterangeLastInTime: [n…

    2022年9月19日
    60600
  • excel下拉列表怎么添加新内容

    excel下拉列表添加新内容的方法: 1、说先点击添加好的下拉,查看里面的内容。 2、之后选择这个下拉,点击任务栏的“数据”。 3、之后在点击下面的“数据验证”。 4、在弹出的窗口中进入设置,在“来源”中添加要新增的内容, 最后点击确定即可。 以上就是“excel下拉列表怎么添加新内容”这篇文章的所…

    2022年8月27日
    1.0K00
  • 电脑中的五角星怎么打出

    电脑中的五角星打出方法: 1、由于键盘上没有五角星,所以我们需要借助输入法。 2、不同输入法界面略有不同,下面以搜狗输入法为例。 3、首先打开语言栏,点击最右边的图标,打开“智能输入助手” 4、打开后,找到并点开“符号大全” 5、然后进入左上角的“特殊符号” 6、最后在其中点击“五角星”符号就可以打…

    2022年8月31日
    80400
  • 中小团队都在用哪些不错的多人协作办公软件

    中小团队都在用哪些不错的多人协作办公软件?使用比较广泛的六大类协作软件包括:项目管理协作沟通软件,典型的有Worktile;研发管理协同软件,主流软件包括PingCode、jira;文档协同软件,主流的有Confluence、gitbook;会议协同软件,典型的有腾讯会议;设计协同软件,比如蓝湖;沟…

    2023年5月10日
    1.1K00
  • mysql的timestamp存在的时区问题怎么解决

    简介 众所周知,mysql中有两个时间类型,timestamp与datetime,但当在网上搜索timestamp与datetime区别时,会发现网上有不少与时区有关的完全相反的结论,主要两种: timestamp没有时区问题,而datetime有时区问题,原因是timestamp是以UTC格式存储…

    2022年9月6日
    1.7K00
  • SQL增删改操作实例分析

    插入记录 SQL1 插入记录(一) 表exam_record结构 题目描述牛客后台会记录每个用户的试卷作答记录到exam_record表,现在有两个用户的作答记录详情如下:用户1001在2021年9月1日晚上10点11分12秒开始作答试卷9001,并在50分钟后提交,得了90分;用户1002在202…

    2022年9月21日
    64400
  • SpringCloud Hystrix怎么使用

    Hystrix是Spring Cloud中集成的一个组件,在整个生态中主要为我们提供以下功能: 服务隔离 服务隔离主要包括线程池隔离以及信号量隔离。 服务熔断 当请求持续失败的时候,服务进行熔断,默认熔断5S,也是就说在这5S内的请求一律拒绝。 服务降级 当前请求失败的时候,返回降级的结果。 1. …

    2022年9月6日
    68800
  • 如何分析SQLMap和SQLi注入防御

    名列前茅部分:Sqlmap使用 1.1 sqlmap介绍 1. 前边说了一些sql注入的基础语句,但是手工注入很麻烦,我们可以借助sqlmap这个强大的sql注入工具,进行数据的获取. 2. sqlmap介绍 (1)#sqlmap是一种开源的渗透测试工具,可以自动检测和利用SQL注入漏洞以及接入该数…

    2022年9月16日
    62300
  • Redis怎么实现保存对象

    redis保存对象 redis数据结构 String——字符串 Hash——字典 List——列表 Set——集合 Sorted Set——有序集合 redisTemplate.opsForValue();//操作字符串redisTemplate.opsForHash();//操作hashredis…

    2022年9月2日
    55500
  • windows deepin没有无线网络怎么解决

    解决方法: 方法一: 1、可以尝试先切换回windows系统,然后下载驱动人生。 2、然后在windows系统下更新自己的无线网卡驱动,更新后再切换回deepin系统看看能否显示。 方法二: 1、如果windows修复无效,那么回到deepin,打开“深度终端” 2、在其中输入“lspci | gr…

    2022年9月21日
    84700
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部