class 7: vue.js 3 前端工程化

默认情况下，不能直接使用单文件组件来编写组件，因为浏览器不认识SFC(.vue)文件。因此，我们需要使用webpack或者Vite构建一个支持SFC开发的Vue.js 3环境

前端发展史

1. Web早期：也就是互联网发展早期，前端开发人员只负责写静态页面，纯粹地展示功能，JavaScript的作用只体现在一些表单的验证和增加特效上。当然，为了在页面中动态填充一些数据，相继出现了JSP、ASP、PHP等开发模式
2. Web近期：随着AJAX技术的诞生，前端不仅可以展示页面，也可以管理数据，以及和用户进行互动。随着与用户交互、数据交互的需求增多，jQuery这样的优秀的前端工具库开始大放异彩
3. 现代Web：现代Web前端开发更加多样化和复杂化。比如，多样化的前端支持开发PC Web页面、移动端Web页面、小程序、公众号和App。然而在开发模式上也面临着一系列复杂性的问题

现代前端开发目前面临一系列的复杂性问题，列举如下

• 项目需要通过模块化的方式进行开发
• 项目需要使用一些高级特性，从而加快开发效率或安全性，比如使用ES6+、TypeScript开发脚本逻辑，使用Sass、Less等编写CSS样式
• 项目开发过程中需要提供本地服务，能实时监听文件变化并反映到浏览器上，提高开发效率
• 项目打包部署时，需要对代码进行压缩、合并及其他相关的优化

大部分的Vue.js 3、React、Angular开发者并不会遇到上述问题，因为大部分的人是借助对应框架提供的脚手架(CLI)来创建工程化项目的。例如，Vue CLI、create-react-app、Augular CLI等脚手架默认已经帮助我们解决了上述问题，它们本质上也是基于webpack构建工具实现了。然而，这些通过脚手架创建的项目通常被称为前端工程化项目

webpack

web pack is a static module bundler for modern JavaScript applications.

• 打包(bundler)：可将应用程序打包成能在浏览器中运