专栏首页LaravelCodeLaravel 项目中编写 Vue 组件

Laravel 项目中编写 Vue 组件

编写 Vue 组件

新安装的 Laravel 应用在 resources/js/components 目录默认包含一个 ExampleComponent.vue Vue 组件。 ExampleComponent.vue单文本 Vue 组件 的实例,定义了自身的 JavaScript 和 HTML 模版。单文本组件为构建 JavaScript 驱动的应用提供了便利。这个实例组件已经在 app.js 文件中注册:

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue')
);

想要在应用中使用组件,只需要把它放在 HTML 模版中即可。例如,运行 make:auth Artisan 命令生成应用的认证和注册页面后,就可以把它置入 home.blade.php Blade 模版:

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

{tip} 谨记,每次修改 Vue 组件后,都应该运行 npm run dev 命令。或者,运行 npm run watch 命令监听组件的每次修改,进行自动编译。

需要 Vue 组件更多信息的话,可以阅读 Vue 官方文档, 它对整个 Vue 框架进行了充分、易读的综述。

以上内容是文档翻译过来的,可以看出要想在 Laravel 中 使用Vue 大致需要 4 步。

  • resources/js/components 中编写 .vue 组件
  • app.js 中注册
  • 视图中应用组件
  • 编译运行 npm run dev 命令

接下来基于以上步骤编写一个自己的组件

创建组件

resources/js/components 中编写 HelloWorld.vue 组件

<style scoped>
</style>

<template>
    <div class="flex-center position-ref full-height">
        <p>hello world</p>
    </div>
</template>

<script>
    export default {}
</script>

注册组件

app.js 中注册该组件

.
.
.
Vue.component('hello-world', require('./components/HelloWorld.vue'));

const app = new Vue({
    el: '#app'
});

使用组件

在视图中使用组件

.
.
.
<body>
    <div id="app">
        <hello-world></hello-world>
    </div>
    <script src="/js/app.js"></script>
</body>
.
.
.

编译前端资源

npm run dev                  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 通过 Laravel 创建一个 Vue 单页面应用(一)

    使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。在此教程中,我们将学习如何构建并运行一个以 Vue 路...

    hedeqiang
  • Laravel 7 新特性-组件以及插槽的简单用法

    其实组件 和 布局 layout 有点儿类似,我们可以抽离相同的代码块,封装成一个组件。以前我们是封装成多个 layout 来进行布局。这个功能和 Vue 极度...

    hedeqiang
  • VueCLI 项目如何使用 Tailwind CSS

    新建 tailwind.css,在 src/assets 新建 css 文件夹,并新建 tailwind.css

    hedeqiang
  • Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!

    CRPER
  • Vue 应用单元测试的策略与实践 03 - Vue 组件单元测试

    2.1 在 Vue 应用的单元测试中,对不同 UI 组件的单元测试有何不同?颗粒度该细到什么样的程度?

    JimmyLv_吕靖
  • Reactive的方式访问Redis

    本文主要大概介绍一下响应式/反应式编程方式访问 redis,不能解决很多生产问题,只是帮助大家对响应式编程有一个认识。

    胖虎
  • 设计模式:原型模式

    系列文章回顾

    王强
  • Vue 3中令人激动的新功能:Fragment+Suspense+多v-model

    我们可以发现我们在实例化和配置应用程序的方式上又有了一个重大的变化。我们现在就来看看它的工作原理:

    前端开发博客
  • 从互联网+到智慧智能,医疗行业的发展到底有多快?

    “人民健康是民族昌盛和国家富强的重要标志。要完善国民健康政策,为人民群众提供全方位全周期健康服务。”

    用户1677530
  • 硅谷移动医疗有多牛?

    大数据文摘

扫码关注云+社区

领取腾讯云代金券