首页 > 解决方案 > Vue显示空白页面

问题描述

我有个问题。我尝试制作 vue 模板,但捆绑后我看到了空白页面。

main.js

'use strict';
import Vue from 'vue'
//import 'bootstrap/dist/css/bootstrap.min.css';
import App from './components/App.vue'

new Vue({
    el: 'app',
    created: function () {
        console.log('root instance was created')
    },
    components: {App},
    methods: {}
});

总线.js

    'use strict';

import Vue from 'vue';

const bus = new Vue();

export default bus;

main.js(bootstrap 被注释了,因为有一个错误“找不到模块”。这可能是主要问题......我不知道:()

'use strict';
import Vue from 'vue'
//import 'bootstrap/dist/css/bootstrap.min.css';
import App from './components/App.vue'

new Vue({
    el: 'app',
    created: function () {
        console.log('root instance was created')
    },
    components: {App},
    methods: {}
});

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VueJS NodeJS and Express  Todo App</title>
</head>
<body>
<div class="app">
    <app></app>
</div>
<script src="/build/bundle.js"></script>
</body>
</html>

标签: node.jsvue.js

解决方案


创建组件:

Vue.component('app', {
  template: '<h3>Template Text</h3>'
});

new Vue({
    el: '#example',
    created: function () {
        console.log('root instance was created')
    },
    methods: {}
});

在 html 中:

 <div id = "example">
        <app></app>
    </div>

推荐阅读