一个vue项目是如何运行的
2019-08-13 本文已影响0人
你喜欢吃青椒吗_c744
image.png
- 找到
index.html
文件,里面有个挂载点。 -
main.js
引入了App.vue
并且会初始化vue实例,在Vue实例中,通过new Vue({ el: '#app',})
告诉该实例要挂载的地方;(即实例装载到index.html
中的位置) -
App.vue
又可以包含公共组件比如头部尾部之类的。还有一个<router-view>
,是路由页面显示的区域。 -
<router-view>
是用来装<router-link>
的内容。
单页应用
单页面应用是和多页面应用相对而言的。
多页面应用是在每次页面跳转的时候,后台服务器都重新生成一张html页面,首屏时间快(只需要加载一次html),搜索引擎优化效果好(html内容都在),但是切换慢(每次页面切换都需要发出一次http请求)。
单页面应用首次加载时会请求一次html,随后的页面渲染都依靠js动态的将当前页面的内容清除掉(原理:js可以感知url的变化),然后将下一个页面的内容挂载到当前页面上(前端实现,不是后端,无http发送时延),首屏慢,搜索引擎优化效果差,但是切换快。
总结:vue的出现代替传统的多页面切换,用户在切换页面时不需要http请求,提升了用户体验。