大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
在上一节课程中，我们已经成功的实现了新增课程的接口，有了接口，我们就可以编写页面，调用接口。
我们这里提到页面，但是知道Vue是如何加载页面的嘛？我相信一些工作一两年的前端选手，也并不知道Vue项目是如何实现的。在正式编写页面之前，我们先来了解一下加载的原理，知其所以然！
打开第一节，我们搭建的Vue项目。
目录结构
可能有很多小伙伴，没有写过Vue的项目，我们先来介绍Vue项目模板的目录解构！
-
public：存放index.html文件，最终所有的组件都会加载在这个index.html上。
-
assets：静态资源，例如图片 视频 CSS。
-
components: 存放组件
-
router：存放路由地址
-
view：存放页面代码
-
App: 网页挂载的地方
-
main.js 项目入口
-
vue.config：Vue官方封装的对Webpack的操作
如果你听完还是不理解，没关系，在敲代码的过程中，会慢慢理解的。
main.js-入口
main.js主要做了两件事：
- 引入并注册第三方组件
- 绑定页面index.html
在上面的的目录介绍中，我们介绍了public中的index.html文件，大家打开这个文件可以看到一个叫做app的div标签。
在main.js中，我们可以看到,mount方法绑定了一个**#app**，这里的**#app**就是上面的div。
createApp(App).use(ElementPlus).use(router).mount('#app')
最终Vue会将所有的组件加载到div#app的里面，这也是我理解的vue叫做单页面应用开发的原因。
路由以及加载组件
好了，现在正式开始了，先启动项目。首页的上方是导航，点击会跳转到对应的页面。这里的跳转是使用Vue-Router控制的。
打开APP.vue文件，这里可以看到有三个标签router-link和router-view，这两个标签就是Vue-Router提供的。
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view/>
其中router-link 标签和a标签的作用一致，最终也是会渲染成a标签。这里的to会渲染成href属性
to=“***”，这里的***就是我们说的路由，他是在src\router\index.js定义的。
这里的写法是最基本的写法，path和component是必须的。
- path你可以理解为在浏览器的显示的路径
- component指的是要加载的组件。
值得一提的是，这里component的引入方式是懒加载！有兴趣的同学可以去了解了解。
router-view的作用是将要跳转页面加载在router-view里面。
例如下面是我们的home页面的代码：
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
当我们跳转到home的时候，Vue就会将整个代码加载到router-view上
总结
我们来梳理一下：vue/cli 生成的项目是如何加载页面的。
在public目录下有一个index.html文件
在main.js中我们调用mount方法，绑定到index.html中的div#app
通过Vue-Router,我们可以将组件渲染到router-view上
最后会将Vue-Router渲染的组件，加载到div#app中。
评论区