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. Rocket - debug - Example: Selecting Harts

    https://mp.weixin.qq.com/s/HjG5S9binyniG_amC3Dr5Q 介绍riscv-debug的使用实例:如何选择核心,执行Halt/Resume请求. 1. Sele ...

  2. css引入方式和基本样式

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...

  3. 核心记账业务可用jdk7的PriorityBlockingQueue优先阻塞队列结合乐观锁实现

    -- 1.优先级阻塞队列 当前核心记账业务是悲观锁实现,但考虑到高并发和死锁的问题,可以用PriorityBlockingQueue优先阻塞队列结合乐观锁实现,对于并发时出现锁无法update时可以重 ...

  4. Java实现 LeetCode 572 另一个树的子树(遍历树)

    572. 另一个树的子树 给定两个非空二叉树 s 和 t,检验 s 中是否包含和 t 具有相同结构和节点值的子树.s 的一个子树包括 s 的一个节点和这个节点的所有子孙.s 也可以看做它自身的一棵子树 ...

  5. Java实现 LeetCode 299 猜数字游戏

    299. 猜数字游戏 你正在和你的朋友玩 猜数字(Bulls and Cows)游戏:你写下一个数字让你的朋友猜.每次他猜测后,你给他一个提示,告诉他有多少位数字和确切位置都猜对了(称为"B ...

  6. Java实现 LeetCode 240 搜索二维矩阵 II（二）

    240. 搜索二维矩阵 II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列. 每列的元素从上到下升序排列. ...

  7. java实现购物券消费方案

    公司发了某商店的购物券1000元,限定只能购买店中的m种商品.每种商品的价格分别为m1,m2,-,要求程序列出所有的正好能消费完该购物券的不同购物方法. 程序输入: 第一行是一个整数m,代表可购买的商 ...

  8. java实现第七届蓝桥杯煤球数量

    煤球数量 煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第四层10个(排列成三角形), - 如果一共有100层,共有多少个煤 ...

  9. 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

    1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...

  10. matlab-整数规划(非线性规划之蒙特卡洛法（随机取样法）)

    首先编写M 文件mengte.m 定义目标函数f 和约束向量函数g,程序如下:function [f,g]=mengte(x);%定义目标函数f和约束向量函数g f=x()^+x()^+*x()^+* ...