VUE的单文件组件

/**
 * 传统组件的问题
 * （1）全局定义的组件必须要求组件名称不重复
 * （2）字符串模板缺乏语法高亮
 * （3）不支持CSS
 * （4）没有构建步骤限制，只能使用HTML和ES5.不能使用Babel预处理
 * 
 * 解决
 * 使用Vue单文件组件
 * 
 * 单文件组件的组成结构
 * （1）template 组件的模板区域
 * （2）script 业务逻辑区域
 * （3）style 样式区域
 * 
 * webpack 中配置vue组件的加载器
 * 运行 npm i vue-loader-template-compiler -D 命令
 * 在webpack.config.js 配置文件中，添加 vue-loader 的配置如下
 * 
 * vscode最好安装一个插件vetur
 * */