[英]How to properly inject app element in webpack? - Receiving [Vue warn]: Cannot find element: #app
这是我的代码示例
我正在尝试学习webpack 4,并正在建立一个测试项目。
传统上,我是在Asp.net网站内部构建vuejs应用的。 因此,我总是知道html入口,可以将元素放在页面上。
从我看到的所有博客文章中,这似乎都是他们设置应用程序所要做的。
App.Vue
<template>
<div id='app'>
<router-view></router-view>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class App extends Vue {
}
</script>
index.ts
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: (h) => h(App),
router
}).$mount('#app');
运行此命令时,我得到[Vue警告]:找不到元素:#app。 如果我加
document.write('<div id="app"><router-view></router-view></div>');
代码运行正常。 由于我使用的是vue-router,因此我认为我实际上不需要App.vue文件,但是我仍然需要某个位置来挂载vue对象。
因此,看看我的github链接,什么是正确的方法?
这是一个鸡与蛋的问题。 您正在尝试将根组件的数量分配到#app
div中,但是#app
div存在于App
组件中。 在您调用new Vue
,由于尚未安装App
组件,因此#app
div不存在!
大多数Vue应用程序在index.html
文件中都有一个空的<div id="app"></div>
,以便在页面加载后,根Vue组件可以挂载到某个地方。
如果您不想这样做,可以改为手动安装:
const root = new Vue({
render: (h) => h(App),
router
}).$mount()
document.body.appendChild(root.$el)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.