和 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. chrome调试技巧和插件介绍

    14 个你可能不知道的 JavaScript 调试技巧 五种前端开发必备的调试技术 日志的艺术 吐血推荐珍藏的Chrome插件 吐血推荐珍藏的 Chrome 插件(二)

  2. 用FileZilla链接Linux服务器

    这里以CentOS举例 用SSH文件传输端口,默认为22端口,用netstat -antulp | grep ssh命令查看!

  3. tcp黏包

    转载https://www.cnblogs.com/wade-luffy/p/6165671.html 无论是服务端还是客户端,当我们读取或者发送消息的时候,都需要考虑TCP底层的粘包/拆包机制. 回 ...

  4. IDEA-使用技巧

    IDEA--个性化配置 - 心飞扬的博客 - CSDN博客--里面很好,http://blog.csdn.net/afzaici/article/details/71524643 IntelliJ I ...

  5. centos U盘挂载问题

    查看u盘路径 fdisk -l Disk /dev/sda: 16.2 GB, 16236150784 bytes, 31711232 sectors Units = sectors of 1 * 5 ...

  6. 【Shell】30分钟关闭Tcpdump，开启Tcpdump、检测目录大小终止任务

    场景 按照一定时间规律运行Tcpdump 思路 编程思路细化思考 查看文件个数 file_count_results=`ls -al "C:\\Users\\Windows32\\Deskt ...

  7. ESD总结

    设计人员完全可以让系统在经过ESD事件后不发生故障并仍能继续运行.将这个目标谨记在心,下面让我们更好地理解ESD冲击时到底发生了什么,然后介绍如何设计正确的系统架构来应对ESD. 简单模型 将一个电容 ...

  8. ES6学习笔记四（类和对象）

    { // 构造函数和实例 class Parent{ constructor(name='mukewan'){ this.name=name; } } let v_parent=new Parent( ...

  9. 华为QUIDWAY系列路由器的负载均衡配置

    作者:邓聪聪 华为系列路由器的负载均衡NQA联动侦测配置案例: 需求:该局域网,IP地址(末位奇数)走联通,IP地址(末位偶数)走电信当某个运营商不可达时,自动切换.通过NQA来确定运营商是否可达., ...

  10. linux学习之硬盘的存储原理和内部架构

    原文地址:https://blog.csdn.net/tanggao1314/article/details/52074735 首先,让我们看一下硬盘的发展史: 1956年9月13日,IBM的IBM ...