小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前面的学习中我们使用 Vue 的过程都是在 html 文件中，通过 template 编写自己的模板、脚本逻辑、样式等，这是为了方便讲解那些知识点；
但是随着项目越来越复杂，我们会采用组件化的方式进行开发：
- 这就意味着每个组件都会有自己的模板、脚本逻辑、样式等，这时如果我们还是把代码放在一个
HTML文件中，就显得有点复杂了； - 所以真实开发中，我们必然是会对代码进行抽离的；
- 当然，我们依然可以把它们抽离到单独的
JavaScript、CSS文件中，但这样做意味着一个组件的内容可能要抽离成多个文件，这就显得不太优雅了； - 此外，前面我们代码中的
script是在一个全局的作用域下，很容易出现命名冲突的问题； - 而且，前面我们写的都是些
ES6的代码，但为了适配一些浏览器，我们又必须使用ES5的语法去编写代码； - 最后，在我们编写完代码之后，还需要通过工具对代码进行构建、压缩、打包；
所以在真实开发中，我们可以通过一个后缀名为
.vue的Single File Components（单文件组件）文件把属于一个组件的内容抽离出去，之后可以使用Webpack或者Vite或者rollup等构建工具来对其进行处理，这样一来，上述问题就能得到解决了。
🙌🌰（举个栗子）：
如果要对前面代码中的 ComponentA 组件的有关内容进行抽离，使用 SFC 的方式来做时，我们可能就会抽出来一个 component-a.vue 文件（关于如何命名的问题我们后面讲项目时再说），在这个文件中，我们会编写属于这个组件自己的 template、script 以及 style：
1. 单文件组件的特点
在这个单文件组件中，我们可以获得非常多的特性：
- 代码的高亮；
ES6、CommonJS的模块化能力；- 组件作用域的
CSS； - 可以使用预处理器来构建更加丰富的组件，比如
TypeScript、Babel、Less、Sass等；
2. 如何支持 SFC
通过这个 .vue 文件（SFC），我们把一个组件的有关内容编写在了一起，但又有了一个新的问题：怎么把这个 .vue 文件中的内容转变成我们最终的代码，或者说怎么转成浏览器认识的代码呢（浏览器不认识后缀名为 .vue 的文件，也不认识 .vue 文件中的代码编写格式）？要想以 .vue 文件的模式去编写代码同时让浏览器最终能认识这些代码，我们就需要借助一些工具来实现。
我们可以使用 Webpack/Vite/rollup 等工具对 .vue 文件中的代码进行构建，最终打包成浏览器能直接识别的 JavaScript 代码文件，然后可以把打包后的代码文件部署到服务器中，之后用户在进行浏览时，就应该是从服务器中请求下来代码，而这时请求下来的代码就已经是浏览器能够识别的代码了。最后在用户的浏览器中就能看到我们真正想要的效果了。
所以，下面我们就需要学习如何使用这些构建工具了。这里我们主要学习 Webpack 和 Vite 这两个构建工具的有关知识。
如果我们想要使用这一 SFC（.vue 文件），比较常见的是两种方式：
- 方式一：使用
Vue CLI（本质上还是依赖Webpack的）来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中直接使用.vue文件； - 方式二：自己使用
Webpack或Vite或rollup这类打包工具，对代码文件进行打包处理；
在学习阶段，为了更好地理解 Vue CLI 的原理及其打包项目的过程，接下来会先讲解如何使用 Webpack 搭建一个简单的 Vue 的开发环境（之后我们再去使用脚手架（Vue CLI）时，里面的很多东西就能理解了，包括掌握一些脚手架的配置）。
但最终，无论是后期我们做项目，还是在公司进行开发，通常都会采用 Vue CLI 的方式来完成。
