class 7: vue.js 3 前端工程化
默认情况下，不能直接使用单文件组件来编写组件，因为浏览器不认识SFC(.vue)文件。因此，我们需要使用webpack或者Vite构建一个支持SFC开发的Vue.js 3环境
目录
- 前端发展史
- webpack
- Vue CLI脚手架
前端发展史
- Web早期：也就是互联网发展早期，前端开发人员只负责写静态页面，纯粹地展示功能，JavaScript的作用只体现在一些表单的验证和增加特效上。当然，为了在页面中动态填充一些数据，相继出现了JSP、ASP、PHP等开发模式
- Web近期：随着AJAX技术的诞生，前端不仅可以展示页面，也可以管理数据，以及和用户进行互动。随着与用户交互、数据交互的需求增多，jQuery这样的优秀的前端工具库开始大放异彩
- 现代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)：可将应用程序打包成能在浏览器中运行的JS文件
- 静态的(static)：webpack可以将代码打包成静态资源，包括JS、CSS、图片文件等
- 模块化(module)：webpack支持多种模块化开发方式，包括ES Module、CommonJS、AMD等
- 现代的(modern)：webpack专门用于解决现代前端开发面临的各种复杂问题，比如支持ES6+等
Vue CLI脚手架
- 在软件工程中，用于帮助搭建项目的工具被称为脚手架，Vue CLI(Command-Line Interface)脚手架是基于webpack实现的，它帮助我们写好了各种配置，开箱即用
可以按照相关文档本地通过Vue CLI脚手架新建一个Vue的项目，这部分文档很多。这里就不介绍了，因为我本地已经有现成环境了。用npm run dev启动之后有类似下面的中端输出就说明启动成功了
- 目录结构大概如下
- 暂时先写这些。