Question

我有问题。我尝试制作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: {}
});

bus.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: {}
});

index.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>

Answer 1

创建组件：

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>

Vue显示空白页

1 个答案: