标签搜索
隐藏侧边栏

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

搞前端的半夏
2022-04-10 / 0 评论 / 0 点赞 / 114 阅读 / 1,703 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-15,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

在上一节课程中,我们已经成功的实现了新增课程的接口,有了接口,我们就可以编写页面,调用接口。

我们这里提到页面,但是知道Vue是如何加载页面的嘛?我相信一些工作一两年的前端选手,也并不知道Vue项目是如何实现的。在正式编写页面之前,我们先来了解一下加载的原理,知其所以然!

打开第一节,我们搭建的Vue项目。

目录结构

可能有很多小伙伴,没有写过Vue的项目,我们先来介绍Vue项目模板的目录解构!

  • public:存放index.html文件,最终所有的组件都会加载在这个index.html上。

  • assets:静态资源,例如图片 视频 CSS。

  • components: 存放组件

  • router:存放路由地址

  • view:存放页面代码

  • App: 网页挂载的地方

  • main.js 项目入口

  • vue.config:Vue官方封装的对Webpack的操作

image-20220409100028337

如果你听完还是不理解,没关系,在敲代码的过程中,会慢慢理解的。

main.js-入口

main.js主要做了两件事:

  1. 引入并注册第三方组件
  2. 绑定页面index.html

在上面的的目录介绍中,我们介绍了public中的index.html文件,大家打开这个文件可以看到一个叫做app的div标签。

image-20220409160259814

在main.js中,我们可以看到,mount方法绑定了一个**#app**,这里的**#app**就是上面的div。

createApp(App).use(ElementPlus).use(router).mount('#app')

最终Vue会将所有的组件加载到div#app的里面,这也是我理解的vue叫做单页面应用开发的原因。

image-20220409160455972

路由以及加载组件

好了,现在正式开始了,先启动项目。首页的上方是导航,点击会跳转到对应的页面。这里的跳转是使用Vue-Router控制的。

image-20220409151931618

打开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属性

image-20220409152824822

to=“***”,这里的***就是我们说的路由,他是在src\router\index.js定义的。

这里的写法是最基本的写法,path和component是必须的。

  • path你可以理解为在浏览器的显示的路径

image-20220409154926926

  • component指的是要加载的组件。

值得一提的是,这里component的引入方式是懒加载!有兴趣的同学可以去了解了解。

image-20220409154011950

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上

image-20220409153236774

总结

我们来梳理一下:vue/cli 生成的项目是如何加载页面的。

在public目录下有一个index.html文件

在main.js中我们调用mount方法,绑定到index.html中的div#app

通过Vue-Router,我们可以将组件渲染到router-view上

最后会将Vue-Router渲染的组件,加载到div#app中。

0

评论区