和 CSS 框架一样，Laravel 不强制你使用什么 JavaScript 客户端框架，但是开箱对 Vue.js 提供了良好的支持，如果你更熟悉 React 的话，也可以将默认的脚手架代码替换成 React，实现细节参考官方文档。

学院拥抱的是 Vue.js 框架，所以后续前端相关教程都会基于 Vue.js 编写，有关 Vue.js 的入门教程，可以阅读官方文档，值得一提的是，Vue.js 的作者尤雨溪是中国人，所以该框架从文档角度对中文很友好，关于如何快速入门 Vue.js 框架，作者在知乎上也有建议的学习路线：https://zhuanlan.zhihu.com/p/23134551，可以说是很贴心了，大家遵循这个路线，相信很快可以入门 Vue.js 的开发。

既然已经有这么丰富的资源，关于 Vue.js 的介绍和使用，我这里就不赘述了，我们重点来介绍如何在 Laravel 中通过 Vue 组件构建前端页面和功能。学习过 Vue.js 之后，你会知道通过 Vue Loader 我们可以在前端通过单文件组件的格式编写 Vue 组件，然后注册、引用，在 Laravel 中我们也是这么干的，这可以极大提高前端代码的复用性、可读性和可维护性，下面我们以 Laravel 默认的欢迎页面为例，将其改为通过 Vue 组件来实现，希望可以帮助你快速入门如何在 Laravel 中编写 Vue 组件。

首先我们在 resources/js/components 目录下新增一个 Vue 组件文件 WelcomeComponent.vue，初始化代码如下：

<style scoped>

</style>

<template>

</template>

<script>

    export default {}

</script>

我们会将该组件的样式代码定义在 <style> 标签中（指定 lang="scss" 可支持 Sass 语法），scoped 表示这段 CSS 样式代码只对当前组件有效。

在 <template> 标签中定义 HTML 模板代码，以及在 <script> 中定义组件的 JavaScript 代码以及导出模块。

然后我们将默认欢迎视图中的样式和 HTML 代码迁移过来，这样，最终的 WelcomeComponent.vue 组件代码看起来是这样的：

<style scoped>

    html, body {

        background-color: #fff;

        color: #636b6f;

        font-family: 'Nunito', sans-serif;

        font-weight: 200;

        height: 100vh;

        margin: 0;

    }

    .full-height {

        height: 100vh;

    }

    .flex-center {

        align-items: center;

        display: flex;

        justify-content: center;

    }

    .position-ref {

        position: relative;

    }

    .top-right {

        position: absolute;

        right: 10px;

        top: 18px;

    }

    .content {

        text-align: center;

    }

    .title {

        font-size: 84px;

    }

    .links > a {

        color: #636b6f;

        padding: 0 25px;

        font-size: 12px;

        font-weight: 600;

        letter-spacing: .1rem;

        text-decoration: none;

        text-transform: uppercase;

    }

    .m-b-md {

        margin-bottom: 30px;

    }

</style>

<template>

    <div class="flex-center position-ref full-height">

        <div class="top-right links">

            <a href="/login">登录</a>

            <a href="/register">注册</a>

        </div>

        <div class="content">

            <div class="title m-b-md">

                Laravel

            </div>

            <div class="links">

                <a href="https://laravel.com/docs">文档</a>

                <a href="https://laracasts.com">视频</a>

                <a href="https://laravel-news.com">新闻</a>

                <a href="https://nova.laravel.com">Nova</a>

                <a href="https://forge.laravel.com">Forge</a>

                <a href="https://github.com/laravel/laravel">GitHub</a>

            </div>

        </div>

    </div>

</template>

<script>

    export default {}

</script>

注意，Vue 组件只支持 JavaScript 代码，不支持 Blade 语法，所以我们将对应的语法和指令做了移除和更新处理。

然后我们在 resources/js/app.js 中全局注册这个组件以便可以在视图文件中应用：

...

Vue.component('welcome-component', require('./components/WelcomeComponent.vue'));

const app = new Vue({

    el: '#app'

});

我们通过 Vue.component() 方法全局注册了 welcome-component 组件，第一个参数是组件名，第二个参数是引入组件文件的位置，这样我们就可以在 resources/views/welcome.blade.php 视图文件中通过组件名使用这个组件了，修改 welcome.blade.php 代码如下：

<!doctype html>

<html lang="{{ app()->getLocale() }}">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link href="{{ asset('css/app.css')  }}" rel="stylesheet">

    </head>

    <body>

        <div id="app">

            <welcome-component></welcome-component>

        </div>

        <script src="{{ asset('js/app.js') }}"></script>

    </body>

</html>

移除了之前的 CSS 代码，将其改为通过编译后的外部文件引入（Laravel Mix 会自动识别 Vue 组件中的 CSS 代码并将其编译到 app.css 文件中）。移除了之前的 HTML 代码，将其改为通过 welcome-component 组件引入，并且将组件挂载到 id="app" 的 div 容器内，这是我们在 app.js 中定义的 Vue 容器，如果组件不挂载到这个容器将不会生效。最后我们引入了编译后的 app.js 文件，完成 Vue 组件的挂载和渲染。

这样，我们就将之前默认实现的欢迎页面改写为了通过 Vue 组件构建的页面，在项目根目录下运行 npm run dev 重新编译前端资源（如果之前没有运行过 npm install 的话，需要先运行这个命令）：

编译完成后，再次访问应用首页，就可以看到新的由 Vue 组件驱动的欢迎页面：

如果你的 Chrome 浏览器安装过 Vue DevTools 扩展，F12 就可以看到页面包含了 WelcomeComponent 组件：

好了，我们已经完成了在 Laravel 中编写第一个 Vue 组件，很简单吧，有了 Vue 组件，以后前端开发和维护会更加高效，想要在 Laravel 中结合 Vue 构建更加复杂的前后端分离应用，可以阅读学院提供的《基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列》教程深入工程实践。

Laravel 项目中编写第一个 Vue 组件的更多相关文章

  1. 自己编写并发布一个Vue组件

    自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...

  2. 如何在一个文件中写多个Vue组件（译-有删改）

    原文地址 Writing multiple Vue components in a single file 在一个文件中编写多个组件是React的模式,其中一些文件包含多个组件. 走开发过程中,有些组 ...

  3. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  4. 在 Laravel 项目中使用 Elasticsearch 做引擎，scout 全文搜索(小白出品, 绝对白话)

    项目中需要搜索, 所以从零开始学习大家都在用的搜索神器 elasiticsearch. 刚开始 google 的时候, 搜到好多经验贴和视频(中文的, 英文的), 但是由于是第一次接触, 一点概念都没 ...

  5. 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"

    如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...

  6. [Laravel-Swagger]如何在 Laravel 项目中使用 Swagger

    如何在 Laravel 项目中使用 Swagger http://swagger.io/getting-started/ 安装依赖 swagger-php composer require zirco ...

  7. Android 项目中常用到的第三方组件

    项目中常用到的第三方组件 1 社会化分享ShareSDK-Core-2.5.9.jarShareSDK-QQ-2.5.9.jarShareSDK-QZone-2.5.9.jarShareSDK-Sin ...

  8. 在java web项目中编写自己的代码生成器

    在java web项目中编写自己的代码生成器

  9. 一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

随机推荐

  1. 使用IDEA新建Web工程启动报404的错误

    新换了一个项目组被人吐槽配置文件都能写错,所以打算从头开始一步步搭建一个项目,包含ssm基础框架.mongodb工具类.redis工具类.jsf配置.log配置等 今天先来搭建一个web工程.工程搭建 ...

  2. 什么是java字节码？

    什么是java字节码? java字码是java源程序代码的一种较为低级的表示.Java编译器将源代码编译成字码后,就可以Java解释器执行

  3. Django学习手册 - ORM sqlit基础数据库操作

    步骤阐述:( splitDB 是Django自带的一个数据库) 1.在APP01 中的 models.py 配置DB信息  userinfo 相当于数据表的表名,而 uname.pwd 相当于 表中的 ...

  4. RabbitMQ简单应用の轮训分发

    MQ连接工厂还是之前的那个Connection package com.mmr.rabbitmq.util; import java.io.IOException; import com.rabbit ...

  5. 20165231 预习作业3 linux安装及学习

    linux安装 由于以前稍微关注过虚拟机相关知识,所以大致知道虚拟机软件的相关知识.目前我已知的普遍使用的虚拟机软件是VMware Workstation(下文简称VM),VirtualBox(下文简 ...

  6. 绕过PALOALTO TRAPS EDR解决方案

    0x1 技术点 PaloAlto Traps(EDR解决方案)基于行为封锁和标记许多黑客工具. 0x2 绕过方法 最简单的解决方案就是禁用内置实用程序,即; Cytool.Cytool是一个集成命令行 ...

  7. NLog类库使用探索——详解配置

    1 配置文件的位置(Configuration file locations) 通过在启动的时候对一些常用目录的扫描,NLog会尝试使用找到的配置信息进行自动的自我配置. 1.1 单独的*.exe客户 ...

  8. python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

    python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...

  9. nginx负载均衡优化配置

    针对nginx做负载均衡时其中一台服务器挂掉宕机时响应速度慢的问题解决 nginx会根据预先设置的权重转发请求,若给某一台服务器转发请求时,达到默认超时时间未响应,则再向另一台服务器转发请求. 默认超 ...

  10. matlab积分使用

    clc; %清屏 clear; %清除变量 close all; %关闭 syms x; f(x) = x; df = int(f(x),x);%求不定积分 figure; subplot(1,2,1 ...