和 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=&quot;$attrs&quot; 和 v-on=&quot;$listeners&quot;

    如何写好一个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. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  2. 简单的ASP.NET MVC发布

    学习这样久的ASP.NET MVC,但一直没有实现过发布MVC程序.今天来试试. 分两个部分进行,先是第一部分,Visual Studio的publish:创建一个带有实例的ASP.NET MVC: ...

  3. 无法debug断点跟踪JDK源代码——missing line number attributes的解决方法

    在项目工程->Properties->Java Build Path->Libraries中导入的JRE System Library库里,给jar包添加JDK源代码包后,能够直接打 ...

  4. leetcode面试准备:Lowest Common Ancestor of a Binary Search Tree &amp; Binary Tree

    leetcode面试准备:Lowest Common Ancestor of a Binary Search Tree & Binary Tree 1 题目 Binary Search Tre ...

  5. 使用PHP对文件进行压缩解压(zip)

    使用虚拟主机进行文件上传时最常用的工具莫过于FTP了,但是使用FTP有一个弊端就是文件太多时上传或下载速度比较慢,如果上传时将文件打包,上传后在 空间解压缩,同样下载前将文件打包压缩以压缩包的形式下载 ...

  6. VS快捷键教程

    删除或剪切一行(Ctrl + X) 不须要选择不论什么文本, 用来剪切一行, 最经常使用来删除一行.  删除一行也能用 Shift+Delete 格式化整个文档(Ctrl + K, Ctrl + D) ...

  7. hdu2844 &amp;amp; poj1742 Coin ---多重背包--两种方法

    意甲冠军:你有N种硬币,每个价格值A[i],每个号码C[i],要求. 在不超过M如果是,我们用这些硬币,有多少种付款的情况下,.那是,:1,2,3,4,5,....,M这么多的情况下,,你可以用你的硬 ...

  8. LeetCode之Easy篇 ——(1)Two Sum

    1.Two Sum Given an array of integers, return indices of the two numbers such that they add up to a s ...

  9. [lua]写个简单的Lua拓展-sleep函数

    这几天在做一个小项目,其中用到了一些基本的API, 例如sleep,获取当前目录等等,lua标准库中没有提供这些接口,虽然所第三方库中也都有实现,但是要用的就那么几个函数,在一个嵌入式系统中安装那么多 ...

  10. C# 操作Word文本框——插入表格/读取表格/删除表格

    在文本框中,我们可以操作很多元素,如文本.图片.表格等,在本篇文章中将着重介绍如何插入表格到文本框,插入的表格我们可以对表格进行格式化操作来丰富表格内容.此外,对于文本框中的表格内容,我们也可以根据需 ...