新人,刚开始学习vue+webpack,一步步自己搭建。运行页面后,编译没有报错,页面也没有报错,貌似vue实例已经成功创建了。index.html里的不见了,应该是被替换掉,但是页面却显示空白,想不明白,请教各位:上面是index.htmlexportdefault{name:"app"}上面是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);},});{{name}}exportdefault{data(){return{name:"hellow",}},created(){console.log("index",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里面的内容会没有生成,我觉得是模板指向之类的问题错了,但是搜了很久也想不到原因,请各位指点下。
2 回答
森栏
TA贡献1810条经验 获得超5个赞
咦~,你这个自然是不会显示的啦,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实例化的各个选项、单文件组件。
呼如林
TA贡献1798条经验 获得超3个赞
你的webpack.config配置的问题,你的vue引用错了,请参考vue-cli别名配置,你的模板是无效的。在你的webpack.config加入下面这段代码:resolve:{alias:{'vue$':'vue/dist/vue.esm.js',}},
添加回答
举报
0/150
提交
取消