首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Laravel 项目中编写 Vue 组件

Laravel 项目中编写 Vue 组件

作者头像
hedeqiang
发布2019-12-17 21:44:37
8330
发布2019-12-17 21:44:37
举报
文章被收录于专栏:LaravelCodeLaravelCode

编写 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                  
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 编写 Vue 组件
  • 创建组件
  • 注册组件
  • 使用组件
  • 编译前端资源
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档