和 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. Vue.js 技术揭秘（学习） slot

    slot特性分发父组件的内容 作用域插槽:通过子组件的一些数据来决定父组件实现插槽

  2. 闭包可以存储变量（下标） 小demo

    点击每一行弹出其下标

  3. typecho只能打开主页,文章详细内容打不开

    安装环境: nginx+linux 问题描述: 安装了typecho显示成功安装,但是前端只显示标题和摘要,点击查看不了详细内容. 问题原因: PHP这块不支持pathinfo, 官网提供的解决方案有 ...

  4. MySql cmd下的学习笔记 —— 有关select的操作（max, min等常见函数）

    先把之前建的goods表找到 找到最贵的本店价(max) 找到最便宜的本店价(min) 查出一共还有多少商品(count) 查看商品价的平均价(avg) 查看本店有多少种商品 当count(*)时 输 ...

  5. CF1139A Even Substrings

    题目地址:CF1139A Even Substrings 一个数是偶数等价于其最后一位为偶数(2/4/6/8/0) 从左往右扫一遍,如果一个数是奇数则直接跳过,偶数则加上它对答案的贡献 这里的贡献应该 ...

  6. CF1100F Ivan and Burgers

    题目地址:CF1100F Ivan and Burgers 一道有难度的线性基题,看了题解才会做 预处理两个数组: \(p_{r,i}\) 表示满足下列条件的最大的 \(l\) :线性基第 \(i\) ...

  7. SQL Server - 索引详细教程 （聚集索引，非聚集索引）

    转载自:https://www.cnblogs.com/hyd1213126/p/5828937.html 作者:爱不绝迹 (一)必读:深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录. ...

  8. seo 优化排名 使用总结

    SEO 的优化技巧 随着百度对竞价排名位置的大幅减少,SEO优化将自己的网站在首页上有更好的展示有了更多的可能. 本文将系统阐述SEO优化原理.优化技巧和优化流程. 搜索引擎的优化原理是蜘蛛过来抓取网 ...

  9. IPC$横向渗透代码实现

    思路 IPC$横向渗透的方法,也是病毒常用的扩散方法. 1.建立连接 2.复制文件到共享中C$.D$.E$.F$ 3.获取服务器的时间 3.设定计划任务按时间执行 用到的Windows API 建立网 ...

  10. Open-Drain与Push-Pull【转】

    转自:https://www.cnblogs.com/zhangpengshou/p/3643546.html GPIO的功能,简单说就是可以根据自己的需要去配置为输入或输出.(General Pur ...