【vue】index.html main.js app.vue index.js怎么结合的?

第一步、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初学的理解,可能会存在误解,如有错误的地方还望指正

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容