后端的html内容在vue中解析,基于Vue来解析页面在浏览器中呈现的过程中所涉及到的知识点...

前言

此篇文章是基于Vue来分析一下从编辑好代码->打包->将dist文件夹放置到服务器上->访问该网址->页面呈现。此过程所涉及到的知识点，本篇很少涉及到具体的代码，主要是理论上的知识，如有错误，烦请各位在评论区指出。

概念

Vue-cli(快速建立开发环境的脚手架)

webpack(模块打包工具)

Vue-loader(将单文件组件.vue解析成JS代码形式)

单页面应用与多页面应用(SPA与MPA)

浏览器进程(包括JS脚本执行、HTML/CSS的渲染)

JS、CSS的加载与阻塞

路由(封装好的Vue-Router)

动态加载JS脚本

在我们初学Vue的时候，多数人是在html文件中创建标签进行代码的编写，所有我们所需要的组件都在一个或多个scrpit标签下进行注册。但是在真实项目中，我们会编写成千上万行代码，如果都放在一个文件下，那样会导致可读性十分地差。所以Vue官方推出了Vue-cli(cli = Command-Line Interface = 命令行界面)，通过在命令行窗口中输入某条命令，即可创建一个真实项目中所需要的元素(包括目录、主文件入口、根组件、开发/生产环境的默认配置...)，这样我们只需要在对应目录编写代码，通过import/export引入对应模块，修改配置，再输入自带的命令，就可以生成一个页面，并且代码可读性十分强。

其实在Vue-cli中已经集成了webpack，我们可以通过配置webpack.xxx.conf.js文件，按照你的需求进行打包。而为什么我们需要webpack这个打包工具呢？是因为在项目中，我们需要有模块化的思