首页 > 解决方案 > Vue.js 组件白屏

问题描述

我的简单演示组件出现白屏,我不知道我的代码有什么问题。

仪表板.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello'
    }
  }
}
</script>

main.js

import Vue from 'vue'
import Dashboard from './components/Dashboard.vue'
new Vue({
    el: '#app',
    components : {
        Dashboard
    }
}) 

只是白屏,DOM 中不存在组件。Vue2.X

标签: javascriptvuejs2

解决方案


把它放在你的main.js中,你的里面没有渲染函数:

import Vue from "vue";
import Dashboard from "./components/Dashboard.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(Dashboard)
}).$mount("#app");

推荐阅读