一、单文件组件简介
1、什么是.vue文件
.vue文件是单文件组件，是vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件。在文件内封装了组件相关的代码。
.vue文件包括三部分：
- a) <template> 写html代码
- b) <style> 写css代码
- c) <script> 写js代码（建议写ES6语法）
2、vue-loader
- 浏览器本身不认识.vue文件，需要对.vue文件进行加载解析，此时需要使用vue-loader来实现。
- 类似的loader还有很多，例如：html-loader（加载html代码）、css-loader、style-loader、babel-loader等。
- 需要注意的是 vue-loader是基于webpack的。
3、webpack
- webpack是一个前端资源模块化加载器和打包工具，它能够把各种资源都作为模块来使用和处理。
- 实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后的文件。
- 简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出。
- webpack官网：https://webpack.docschina.org/
- webpack有一个核心配置为文件：webpack.config.js，必须放在项目根目录下。
二、代码实现
1、创建项目，目录结构如下：
webpack-demo
| - index.html
| - main.js 入口文件
| - App.vue vue文件
| - package.json 工程文件
| - webpack.config.js webpack配置文件
| - .babelrc Babel配置文件