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日

相关推荐

  • 2024年9款优质CRM系统全方位解析

    文章介绍的工具有:纷享销客、Zoho CRM、八百客、红圈通、简道云、简信CRM、Salesforce、HubSpot CRM、Apptivo。 在选择合适的CRM系统时,许多企业面临着功能繁多、选择困难的痛点。对于中小企业来说,找到一个既能提高客户关系管理效率,又能适应业务扩展的CRM系统尤为重要…

    2024年7月25日
    1600
  • 数据库权限关系图表是什么

    数据库权限关系图表是一种以图表形式展示数据库权限分配和管理的工具。它可以有效地帮助我们理解和管理数据库中的各种权限关系。数据库权限关系图表主要包含以下几个部分:数据对象、用户(或用户组)、权限类型、权限级别、权限状态等。其中,数据对象是权限关系图表中的核心元素,它代表了数据库中的各种数据资源,如表、…

    2024年7月22日
    200
  • 诚信数据库是什么意思

    诚信数据库是一种收集、存储和管理个人或组织诚信信息的系统。它是一种用于评估和管理个人或组织行为的工具,通常由政府、商业组织或者非营利组织进行运营。诚信数据库的主要功能包括:1、评估个人或组织的诚信状况;2、提供决策支持;3、预防和控制风险;4、促进社会信用体系建设。 在这四大功能中,评估个人或组织的…

    2024年7月22日
    400
  • 数据库期末关系代数是什么

    关系代数是一种对关系进行操作的代数系统,是关系模型的数学基础,主要用于从关系数据库中检索数据。其操作包括选择、投影、并集、差集、笛卡尔积、连接、除法等。其中,选择操作是对关系中的元组进行筛选,只保留满足某一条件的元组;投影操作则是从关系中选择出一部分属性构造一个新的关系。 一、选择操作 选择操作是关…

    2024年7月22日
    700
  • mysql建立数据库用什么命令

    在MySQL中,我们使用"CREATE DATABASE"命令来创建数据库。这是一个非常简单且基础的命令,其语法为:CREATE DATABASE 数据库名。在这个命令中,“CREATE DATABASE”是固定的,而“数据库名”则是你要创建的数据库的名称,可以自己设定。例如,如…

    2024年7月22日
    500
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

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

分享本页
返回顶部