和 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. 配置JDK和Tomcat环境变量

    配置JDK和Tomcat环境变量 一.安装JDK和Tomcat 安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名 ...

  2. 分页插件通用处理，以asp.net mvc为例

    Model: public class PaggerModel { public PaggerModel() { BarSize = ; } public PaggerModel(int total, ...

  3. List与逗号分隔的字符串相互转换

    如果程序员想实现某种功能,有两条路可以走.一条就是自己实现,一条就是调用别人的实现,别人的实现就是所谓的API.而且大多数情况下,好多“别人”都实现了这个功能.程序员有不得不在这其中选择.大部分情况下 ...

  4. 假设result 是一个float型变量，value是一个int型变量。执行以下赋值语句以后，变量value将是什么类型？为什么？

    假设result 是一个float型变量,value是一个int型变量.执行以下赋值语句以后,变量value将是什么类型?为什么? 在执行这条语句的过程中,保存在vulue变量中的值被读取出来并转化为 ...

  5. MongoDB 学习手册 - CURD

    mongoDB 增加数据 // mongoDB 增加数据: //新增数据insert( 字典 ) 表示插入一条数据,insert([字典]) 表示插入多条数据 // db.text01.insert( ...

  6. Linxu基础知识：终端、终端模拟器、shell

    实验楼课程第二个实验的讲解部分出现了三个词,我不知道它们三个是什么关系.查阅了度娘,归纳如下: - 终端: 在UNIX/LINUX系统中,用户通过终端登录系统后得到一个Shell进程,这个终端就成为S ...

  7. VDB R&D

    VDB Data value visualize: 结论从houdini得知. API常用文字: interior:内部 Narrow-band:窄带 background:窄带外 SDF: XY p ...

  8. python3 xml模块

    一.简介 xml是实现不通语言或程序之间进行数据交换的协议,可扩展标记语言,标准通用标记语言的子集.是一种用于标记电子文件使其具有结构性的标记语言.xml格式如下,是通过<>节点来区别数据 ...

  9. HAProxy详解（一）：HAProxy介绍【转】

    一.高性能负载均衡软件HAProxy介绍: 随着互联网业务的迅猛发展,大型电商平台和门户网站对系统的可用性和可靠性要求越来越高,高可用集群.负载均衡集群成为一种热门的系统架构解决方案.在众多的负载均衡 ...

  10. LNMP下Nginx 中文文件名或目录404无法访问的解决方法

    貌似很多人还是会遇到中文乱码的问题,Apache可以使用mod_encoding支持中文目录和文件,LNMP下Nginx其实不需要安装额外的组件即可支持中文文件名或中文目录,下面说一下常见的CentO ...