美文网首页前端Vue专辑
【vue】index.html main.js app.vue

【vue】index.html main.js app.vue

作者: 段佳欢 | 来源:发表于2019-01-29 10:53 被阅读4次

第一步、index.html

vue是单页界面,主窗口通过index.html渲染,默认的http://localhost:8080会去加载index.html,当执行npm run dev后,main.js会被添加到index.html中

第二步、main.js

main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件,会用App.vue替换index.html中的id='app'的div

第三步、App.vue

App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件;App.vue中添加<router-view/>,用来承载路由组件

第四步、index.js

vue路由会去监听url变化,通过路由配合找到相应组件,加载到<router-view/>上,实现页面切换

注:本文系本人对vue初学的理解,可能会存在误解

相关文章

网友评论

    本文标题:【vue】index.html main.js app.vue

    本文链接:https://www.haomeiwen.com/subject/lrjvjqtx.html