前言
此篇文章是基于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这个打包工具呢?是因为在项目中,我们需要有模块化的思