单文件组件

概述

以 .vue 作为后缀名的文件，就是 Vue 中的单文件组件

组件的组成

由 三部分 组成： template 模板/ script 代码逻辑/ style 样式

为什么要使用单文件组件

• 1 原来我们使用全局组件或局部组件在使用模板的时候，是纯字符串
• 2 一个组件是由 HTML、JS、CSS 样式组成的，但是，这三部分被分离了
• 3 原来的方式，限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug 和 Babel 或 Less

使用单文件的步骤

• 1.安装
• 2.在webpack.config.js中添加loader规则配置和一个插件
• 3.创建单文件的组件
• 4.创建Vue的实例，再使用单文件组件
  4.1安装 npm i vue
  4.2 在main.js的文件中导入vue
  4.3创建vue实例
  4.4渲染App.vue单文件组件