时间戳

首页 > 解决方案 > 如何在 app.js 之外使用 VueJs 组件

laravel - 如何在 app.js 之外使用 VueJs 组件

问题描述

我正在使用Laravel和开发单页应用程序 (SPA) VueJs。页面index.blade.php如下所示：

<html>
<head>
<link rel="stylesheet" href="/css/app.css" /> 
</body>
<body>
  <div id="app">
      <layout></layout>
  </div>
<script src="/js/app.js"></script>
</body>
</html>

该layout.vue组件如下所示：

<template>
    <div>
        <input type="text" @keyup="search" />
        <router-view></router-view>
    </div>
</template>
<script>
import router from 'router'

export default {
    data() {
        return {
            popover: false
        }
    },
    methods: {
        search: function (e) {/*Ajax code to search*/}
    }
}
</script>

一切正常，除了一开始页面加载速度较慢。在 javascript 工作之前，我会看到一个白页。所以我决定在index.blade.php. 我想将 html 从layout.vue页面放入，index.blade.php以便在加载 javascript 之前可以看到 html 布局。如何正确合并layout.vue以index.blade.php使该@keyup方法有效？

标签： laravelvue.jssingle-page-application

解决方案

推荐阅读