【Vue3+Express实战-4】Vue加载渲染页面的原理

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：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主要做了两件事：

1. 引入并注册第三方组件
2. 绑定页面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中。