为何我的 vue 实例已经创建了，但是页面上却什么都没有显示？

新人，刚开始学习vue+webpack，一步步自己搭建。运行页面后，编译没有报错，页面也没有报错，貌似vue实例已经成功创建了。index.html里的

不见了，应该是被替换掉，但是页面却显示空白，想不明白，请教各位：

上面是index.html上面是App.vueimportVuefrom'vue';importrouterfrom'./router';importstorefrom'./store';importAppfrom'../../../components/App.vue';newVue({el:'#app',router,store,components:{App},template:"",created(){this.$router.push({name:"index"});console.log("create",this);},});上面是index.vueimportVuefrom'vue';importVueRouterfrom'vue-router';importindexfrom'../../../../components/index.vue';Vue.use(VueRouter);constroutes=[{path:"/index",name:"index",component:index},];exportdefaultnewVueRouter({routes})前面漏了router配置，现在补上。结果实际页面上显示的是：控制台里输出了“created”那句话，没有输出“index",我就想不明白了，不报错的话，为什么index.vue里面的内容会没有生成，我觉得是模板指向之类的问题错了，但是搜了很久也想不到原因，请各位指点下。

炎炎设计

浏览 8221回答 2

2回答

森栏

咦~，你这个自然是不会显示的啦，Index.vue都没有在任何地方被引入，怎么会出现呢？你要在App.vue文件中使用这个组件的话，两种方式。第一种，单独把这个文件引入到App.vue，并且加入components选项中，然后在template模板中使用。第二种，在App.vue中使用router-view组件，并在router/index.js中加入路由映射。看到你的例子中，在Vue根实例中调用$router.push，那么这里有3个问题。1.没有在根实例模板使用router-view2.没有在router/index.js中注册路由3.通常是不在newVue里这么干啦。先使用vue-cli创建一个demo看看吧。对于上面的第一种方式，使用vue-cli3.0，创建一个demo，看里面的HelloWorld.vue和App.vue文件就明白了。建议先了解一下Vue实例化的各个选项、单文件组件。

0 0

呼如林

你的webpack.config配置的问题，你的vue引用错了，请参考vue-cli别名配置，你的模板是无效的。在你的webpack.config加入下面这段代码：resolve:{alias:{'vue$':'vue/dist/vue.esm.js',}},

0 0

随时随地看视频慕课网APP