概念：
把一个组件的所有代码（HTML模板，样式，js（vue对象））写在一个文件里，扩展名是.vue。一个文件里就只有一个组件。这就是单文件组件。
基本结构：

<template>HTML代码
</template><script>vue对象 （使用模块化导出vue对象）：可以使用es6的写法
</script><style scoped> //scoped: 表示局部作用域，表示当前style标签的样式只会应用在当前vue文件里的模板里样式
</style>

脚手架（vue-cli）环境搭建

//1、查看版本（这是查看脚手架的版本） 
vue -V  //2、如果版本是低于3.X，那么卸载脚手架，安装最新的。
npm uninstall vue-cli -g  //3、安装（脚手架工具）
//1)、装脚手架工具的3.x/4.x
npm install -g @vue/cli
//2)、桥接2.X（兼容脚手架2.X）
npm install -g @vue/cli-init //4、创建项目：使用脚手架搭建项目（文件夹）
//1）、如果想搭建版本 v3.x/4.x
vue create 项目目录
//2)、如果想搭建版本 2.X
vue init webpack 项目目录

es6模块化复习

export1.输出
//定义一个文件： a.js//export 可以在一个模块里面多次使用
//export可以对外导出任意类型的数据
//export 导出的数据要有名字（变量名，函数名）export const a = 100
export var b = 200
export var person ={   
}
2.输入（方式一）
//引入：需要解构
import {a,b,person} from './a.js'
import {a,person} from './a.js'
3.输入（方式二）
可以把模块输出的所有变量包装成一个对象
import * as obj from './a.js'  
即：obj就是有三个属性的对象
{a,b,person
}

export default
1.输出//定义一个文件： a.js
//export default 在一个模块里面只能出现一次
//export default可以对外导出任意类型的数据
//export default导出的数据是匿名的（不能写变量名），即就是，只导出值。
格式： export default 任何类型的变量的值（大部分时候是对象）
export default 100;
export default {  };
2.输入
格式：
import 变量名 from "模块所在的路径及其文件名"; （如果是自定义模块就需要写路径，如果是官方的或第三方的模块，不需要写路径）
import a from "./a.js";
a就是export default导出的数据。
a其实就是个变量名。
这种写法其实就是，把变量名和赋的值分在了两个模块里。