默认情况下，不能直接使用单文件组件来编写组件，因为浏览器不认识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)：可将应用程序打包成能在浏览器中运行的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启动之后有类似下面的中端输出就说明启动成功了

• 目录结构大概如下
  
• 暂时先写这些。