前言
今天正式开始写代码了，之前铺垫了很多了，包括 6 篇基础文章，一篇正式环境搭建，就是为了今天做准备，想温习的小伙伴可以再看看《
一、Vue 项目是如何运转的？
1、SPA的挂载页面 —— Index.html
首先你得明白，单页面应用程序是如何读取信息的，作为开发着，我们都经过各种URL配置，也都明白 URl 的组成部分，随便举个栗子：
https://www.cnblogs.com/laozhang-is-phi/p/9629026.html?test=2#index
这个 URL 包含了多个部分：
https: //1、页面请求的协议。www.cnblogs.com //2、为页面所属的域名。p/9629026.html //3、是匹配到某一篇文章的id。?test=2 //4、页面通过 url 传递 get 请求的参数#index //5、为页面的锚点区域
由此可见，之所以 SPA 单页面应用程序的前四个都是一样的，因为只有一个单页面提供入口，所以我们只能通过第五个属性，也就是锚点来实现路由的切换，根据url 的不同路由配置，从而达到页面不刷新的效果，
这个时候你应该能明白了 SPA 是如何运行的，那这个时候你就会问了，是谁承担着工作呢，没错就是——index.html 页面，整个项目都是在这个文件的基础上进行变化，可以说是一个模板，因为就只有这一个页面。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>blogvue3</title> </head> <body> <noscript> <strong>We're sorry but blogvue3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div><!-- 通过app 提供挂载元素，动态的路由加载--> <!-- built files will be auto injected --> </body></html>
不过这个时候你会问，好吧，我知道了单页面的原理，开始如何做出来动态效果呢？请往下看
