Laravel 如何在blade文件中使用Vue组件

1. 安装laravel/ui依赖包

composer require laravel/ui

2.生成vue基本脚手架

php artisan ui react

系统还提供了非常便捷的auth脚手架,带登录注册。

php artisan ui react --auth

3.组件位置

Vue组件ExampleComponent.vue将被放置在resources/js/components目录中。ExampleComponent.vue文件是单个文件Vue组件的示例，该组件在同一文件中定义其JavaScript和HTML模板。单个文件组件为构建JavaScript驱动的应用程序提供了一种非常方便的方法。该示例组件已在您的app.js文件中注册：

Vue.component(

    'example-component',

    require('./components/ExampleComponent.vue').default

);

4.在blade模版中使用

要在应用程序中使用该组件，您可以将该组件放入Blade模板xxx.blade.php中：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>@yield('title')</title>

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

</head>

<body>

    <divid="app">

        <example-component></example-component>

    </divid=>

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

</body>

</html>

注意：在blade文件中一定要有id为app的根节点，而且把组件放到里面，才能生效！！！

本文由博客一文多发平台 OpenWrite 发布！

Laravel 如何在blade文件中使用Vue组件的更多相关文章

  1. 在webpack中配置.vue组件页面的解析

    1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...

  2. 在html中使用vue组件

    最近在维护公司的项目,当我拿到项目时,发现他用了vue. 但是~~仅仅是引用vue.js文件,整体的架构还是html那种,没有用webpack! 当时觉得~哇~原来还可以这样! 然后了解了业务逻辑和代 ...

  3. 如何在webpack开发中利用vue框架使用ES6中提供的新语法

    在webpack中开发,会遇到一大推问题,特别是babel6升级到babel7,要跟新一大推插件,而对于安装babel的功能就是在webpack开发中,vue中能够是用ES6的新特性: 例如ES6中的 ...

  4. 如何在js文件中实现获取request.getCotextPath();

    我们在jsp中可以方便的使用“request.getCotext()”来获取工程的根目录. 但是如果我们的js代码存在一个单独的js文件中,这时候再想获取根目录,我们就要自己截取了.可以采用下面的方式 ...

  5. 在C的头文件中定义的结构体，如何在cpp文件中引用

    解决方案1:在cpp文件中放置.c,且在该文件中引用变量 解决方案2:在一个cpp文件中包含.c,但在另一个cpp文件中使用结构体变量 cpp文件1 cpp文件2 #include "dia ...

  6. NDK编程中如何在C文件中打印调试信息

      1,在Android.mk文件中加上 LOCAL_LDLIBS := -L$(SYSROOT)/usr/lib -llog LOCAL_PATH := $(call my-dir)include ...

  7. vue的js文件中获取vue实例

    1.main.js导出vue实例: var vue = new Vue({ el: '#app', router, components: { App }, template: '<App/&g ...

  8. 如何在html文件中导入header、footer等

    1.include是php函数,所以确实需要转化成.php文件--(其实除了用php,html都有自带的引入方法)2.html转化为php文件很简单,直接改一下后缀名就可以了--(如:index.ht ...

  9. 如何在xml文件中加注释或取消注释

    1)加注释:Ctrl+Shift+/ 2)取消注释:Ctrl+Shift+\ 本文欢迎转载,但请注明作者与出处: 作者:Sophia 出处:http://www.cnblogs.com/Sophia- ...

随机推荐

  1. 关于URL优化的一些经验

    URL在搜索结果列表中时显示内容之一.设计网站结构时需要对目录及文件命名系统做事先规划.总的原则是首先从用户体验出发,URL应该清晰友好.方便记忆,然后才考虑URL对排名的影响.具体可以考虑以下几个方 ...

  2. java eclipse tomcat

    Port 8080 required by Tomcat v9.0 Server at localhost is already in use. The server may already be r ...

  3. 使用Python代码制作GIF动态图

    使用Python  PIL.Image 制作GIF图片: import  PIL.Image                      相关模块 img = Image.open(img_name)  ...

  4. （Java实现） 删数问题

    删数问题(需知道的数学定理) 给定n位正整数a,去掉其中任意k≤n 个数字后,剩下的数字按原次序排列组成一个新 的正整数.对于给定的n位正整数a和正整数 k,设计一个算法找出剩下数字组成的新数最 小的 ...

  5. Java实现 LeetCode 43 字符串相乘

    43. 字符串相乘 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例 1: 输入: num1 = "2& ...

  6. java实现第四届蓝桥杯振兴中华

    振兴中华 题目描述 小明参加了学校的趣味运动会,其中的一个项目是:跳格子. 地上画着一些格子,每个格子里写一个字,如下所示:(也可参见p1.jpg) 从我做起振 我做起振兴 做起振兴中 起振兴中华 比 ...

  7. CGLIB动态代理机制，各个方面都有写到

    CGLIB库介绍 代理提供了一个可扩展的机制来控制被代理对象的访问,其实说白了就是在对象访问的时候加了一层封装.JDK从1.3版本起就提供了一个动态代理,它使用起来非常简单,但是有个明显的缺点:需要目 ...

  8. Fiddler工具学习使用总结

    1.初识fiddler: 作用:截获http/HTTPS请求,查看截获的请求内容,伪造客户端请求和服务器响应,测试网站性能,解密https的web会话,提供插件. 工作环境:支持素有操作系统和所有浏览 ...

  9. linux基础相关命令

    请参照以下文章 shell常用命令:https://www.cnblogs.com/pengtangtang/articles/PengTangTang_linux_base_one.html 通配符 ...

  10. iOS-NSString常见方法

    </pre><pre name="code" class="html">#import <Foundation/Foundatio ...