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,当用户使用了锚点的 ...

  2. Java实现 LeetCode 524 通过删除字母匹配到字典里最长单词（又是一道语文题）

    524. 通过删除字母匹配到字典里最长单词 给定一个字符串和一个字符串字典,找到字典里面最长的字符串,该字符串可以通过删除给定字符串的某些字符来得到.如果答案不止一个,返回长度最长且字典顺序最小的字符 ...

  3. Java实现 LeetCode 396 旋转函数

    396. 旋转函数 给定一个长度为 n 的整数数组 A . 假设 Bk 是数组 A 顺时针旋转 k 个位置后的数组,我们定义 A 的"旋转函数" F 为: F(k) = 0 * B ...

  4. Java实现 蓝桥杯VIP 算法提高 聪明的美食家

    算法提高 聪明的美食家 时间限制:1.0s 内存限制:256.0MB 问题描述 如果有人认为吃东西只需要嘴巴,那就错了. 都知道舌头有这么一个特性,"由简入奢易,由奢如简难"(据好 ...

  5. Java实现 N的阶乘

    import java.util.Scanner; public class n的阶乘 { public static void main(String[] args) { Scanner sc =n ...

  6. java实现第五届蓝桥杯幂一矩阵

    幂一矩阵 天才少年的邻居 atm 最近学习了线性代数相关的理论,他对"矩阵"这个概念特别感兴趣.矩阵中有个概念叫做幂零矩阵.对于一个方阵 M ,如果存在一个正整数 k 满足 M^k ...

  7. 自己动手写SQL执行引擎

    自己动手写SQL执行引擎 前言 在阅读了大量关于数据库的资料后,笔者情不自禁产生了一个造数据库轮子的想法.来验证一下自己对于数据库底层原理的掌握是否牢靠.在笔者的github中给这个database起 ...

  8. 【雕爷学编程】MicroPython动手做（08）——零基础学MaixPy之识别颜色

    早上用百度搜了一下“颜色识别”,多少有了一点大致的概念,还是老办法,动手做,多实验,往前走,还请各位老师多多指点. OpenCV(百度百科)是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运 ...

  9. Python如何绘制可视化图？给你一段代码，你能自己做出来吗

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 喜欢的朋友欢迎关注小编,除了分享技术文章之外还有很多福利 没有数据生成的图 ...

  10. Flask 安装和简单使用

    安装 pip install flask # 1 导入 Falsk from flask import Flask # 2 生成一个 Flask 对象,__name__表示当前文件的名字 app = ...