node.js - 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>
解决方案
创建组件:
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>