测试

Question

我是vue的新手，我正在尝试让一个简单的组件显示在div中。我正在使用laravel 5.4和laravel mix和vue版本2.6.6来显示vue组件。

这是我的视图文件中的div：

<div id="sidenav"> </div>

这是我的app.js

require('./bootstrap');
import Vue from 'vue';
Vue.component('SideNav', require('./components/SideNav.vue').default);

var SideNav = new Vue({
    el: '#sidenav'
});

这是SideNav.vue

<template>
    <div>
        <h1>Test</h1>
    </div>
</template>

<script>
    export default {
        name: 'SideNav'
    }
</script>

npm install，npm build，npm run dev或npm run watch没有任何错误。在页面上我看不到

测试

对于这样一个新问题，我感到抱歉，但这已经使我疯狂了几个小时。

Answer 1

尝试这样的事情；

<div id="sidenav">
    <SideNav></SideNav>
</div>

您在此处将Vue实例“装载”到ID为#sidenav的根元素：

var SideNav = new Vue({
    el: '#sidenav'
});

的意思是，当您在Vue.component('SideNav', require('./components/SideNav.vue'));上创建Vue组件时，您可以访问该根元素内的<SideNav>标签。

此外，我不确定在创建.default结束时是否需要使用Vue.component(...)。

Vue模板未显示？

测试

1 个答案: