- 首页
- 前端开发
- [Vue 警告]:找不到元素 — 呈现空容器
[Vue 警告]:找不到元素 — 呈现空容器
[英] [Vue warn]: Cannot find element — empty container is rendered
本文介绍了[Vue 警告]:找不到元素 — 呈现空容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试学习 Vue 2 框架，但遇到了这个错误.我有以下脚本负责我的应用程序的功能:
main.js
从'vue'导入Vue从 'vue-router' 导入 VueRouter从 'vue-resource' 导入 VueResource从'./App.vue'导入应用程序从'./components/Posts.vue'导入帖子从./routes/routes"导入路由Vue.config.productionTip = falseVue.use(VueRouter)Vue.use(VueResource)const 路由器 = 新的 VueRouter({路线:路线})新的 Vue({el: '#app',路由器:路由器，渲染:h =>h(应用程序)})
App.vue
<div id="应用程序"><路由器视图></路由器视图>
</模板><脚本>从'./components/Posts.vue'导入帖子导出默认{名称:'应用'，成分: {帖子}}<模板><div id='root'><h1>测试</h1><input type="text" v-model="message">
</模板>
Posts.vue
这些脚本包含在页面的末尾.重要的是要提到 id 值为app"的 div 是空的.我也是 webpack 的新手，所以我假设我的导入和导出存在问题，但不幸的是我无法自己解决.索引页面仅包含以下内容:
UPD (router.js)
import Posts from '../components/Posts.vue'const 路由 = [{ 路径:'/'，组件:帖子}]导出默认路由
解决方案
In App.vue
<div id="应用程序"><路由器视图></路由器视图>
</模板>
import Posts from '../components/Posts.vue'const 路由 = [{ 路径:'/'，组件:帖子}]导出默认路由
这里很明显 Posts 组件.
Posts.vue
<div id='root'><h1>测试</h1><input type="text" v-model="message">
</模板><脚本>从'vue'导入Vuewindow.addEventListener('load', function () {新的 Vue({el: '#root',数据: {消息:世界你好！"}})})
闪回路由器，有一行写着:
import Posts from '../components/Posts.vue'
这是导入的默认语法，但 Posts.vue 导出了什么?因此，没有任何东西导入路由器.因此，#app 中没有渲染任何内容.
此外，posts 不必是 new Vue(...) 实例.
<div id='root'><h1>测试</h1><input type="text" v-model="message">
</模板><脚本>从'vue'导入Vue导出默认{数据: {消息:世界你好！"}}
会做的很好.这样，路由器就可以使用默认导出.
I am trying to learn Vue 2 framework and I am stuck with this error. I have the following scripts responsible for the functionality of my application:
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import App from './App.vue'
import Posts from './components/Posts.vue'
import Routes from './routes/routes'
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueResource)
const router = new VueRouter({
routes: Routes
})
new Vue({
el: '#app',
router: router,
render: h => h(App)
})
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import Posts from './components/Posts.vue'
export default {
name: 'app',
components: {
Posts
}
}
</script>
<template>
<div id='root'>
<h1>Test</h1>
<input type="text" v-model="message">
</div>
</template>
Posts.vue
<script>
import Vue from 'vue'
window.addEventListener('load', function () {
new Vue({
el: '#root',
data: {
message: 'Hello World!'
}
})
})
</script>
Those scripts are included at the end of the page. Important to mention that the div with id value of 'app' is empty. I am also new to webpack, so I would assume, that there's a problem with my imports and exports, but unfortunately I could not to resolve it myself. Index page simply contains this:
<div id="app"></div>
UPD (router.js)
import Posts from '../components/Posts.vue'
const routes = [
{ path: '/', component: Posts }
]
export default routes
解决方案
In App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
The <router-view> component will show the components as per the current route.
import Posts from '../components/Posts.vue'
const routes = [
{ path: '/', component: Posts }
]
export default routes
Here it is clear that <router-view> would show the Posts component.
Posts.vue
<template>
<div id='root'>
<h1>Test</h1>
<input type="text" v-model="message">
</div>
</template>
<script>
import Vue from 'vue'
window.addEventListener('load', function () {
new Vue({
el: '#root',
data: {
message: 'Hello World!'
}
})
})
</script>
Flashback to the router, there is a line which says:
import Posts from '../components/Posts.vue'
this is the import default syntax but what has been exported by Posts.vue ? Hence, there is nothing imported to the router. Hence, nothing rendered inside the #app.
Also, posts doesn't have to be a new Vue(...) instance.
<template>
<div id='root'>
<h1>Test</h1>
<input type="text" v-model="message">
</div>
</template>
<script>
import Vue from 'vue'
export default {
data: {
message: 'Hello World!'
}
}
</script>
Will do just fine. With that, there is a default export in place for the router to use.
这篇关于[Vue 警告]:找不到元素 — 呈现空容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
