单文件组件

单文件组件是在开发中用的比较多的，它的后缀都是.vue 结尾的

既然是.vue 结尾，那么直接给浏览器是不能运行的，.vue 文件是 vue 团队打造的特殊文件，想让.vue 文件让浏览器识别并且运行，需要对它进行处理加工成纯粹的 js 文件，那么浏览器就认识了

常用的处理加工.vue 文件有两种方式

1 借助 webpack：自己找一些插件完成整个编译流程

2 借助脚手架：这是 vue 官方提供的，它其实就是 vue 的团队拿着 webpack 打造完的流程和编译整个环境，我们直接拿来用即可

所以第二种方式明显是更简单和方便的，但是这里先不使用脚手架，直接单独看看.vue 文件里面的代码都是什么，应该怎么写，至于怎么运行，以后使用脚手架即可

1 创建组件

接下来就开始编写单文件组件了，首先创建一个学校组件(School.vue)

2 安装插件 vetur

开始编写 vue 代码之前，如果是使用 vscode 进行开发的，推荐一个插件：

它会帮助我们识别.vue 文件，并且进行代码提示和高亮显示等功能，可以大幅度提高开发效率

安装步骤很简单，打开 vscode,插件里面搜索 vetur，点击安装即可，安装完成后建议重启 vscode

3 .vue 单文件代码结构

类似于 html，一个 html 中有 js，html，css 基本代码，对于 vue 来说也是基本一样的

它有三个核心(基本)标签：

1 <template></template>:组件的结构

2 <script></script>:组件交互相关的代码(数据，方法)

3 <style></style>:组件的样式，如果不需要可以不写

写完组件后，我们应该暴露组件，方便给其他组件使用

暴露方式一般有三种，我们一般使用最后一种，也就是默认暴露，因为有些时候当我们暴露的东西是一个的时候，我们往往喜欢默认暴露，因为使用默认暴露，用的时候比较简单，直接 import xxx from xxx 就行了

1 export xxx 分别暴露

2 export {xxx} 统一暴露

3 export default xxx 默认暴露

使用简写 Vue.extend 的方式，直接暴露组件的配置对象，并且用 name 标识组件名称，最好和文件名称保持一致

到了这里，一个单文本组件就写完了，看着结构就很清晰，template 里面写的是组件的结构，script 里面是组件的交互，style 里面是组件的样式，一个标准的组件就完成了

注：如果安装了上面的插件，就不用自己写标签了，可以通过快捷键(<v)自动生成代码结构

打一个尖括号，然后打个 v，回车即可

生成的结构如下

4 完善单文件组件结构

上面已经完成了一个完整的单文本组件(school.vue),接下来继续完善单文件组件的结构

首先复制一个 Student 组件，进行一些更改，首先不要样式，那么就可以去掉 style 标签，不要单击事件，那么就可以去掉 methods 属性，改掉 name 属性为 Student,最终代码如下所示

基本的组件就写到这就行了，两个组件就够了，接下来由一个重量级的人物，那就是 App.vue,它用来管理全部的组件，由 vm 直接调用

App.vue

负责汇总全部的组件 ，在这个文件中，我们要注册组件，在注册之前需要引用组件

在脚手架里面引入组件的时候组件的.vue 后缀可以写也可以不写，我个人喜欢写完整的组件名称+后缀

三部曲：1 引用组件 2 注册组件 3 使用组件(展示组件元素)

到了这个 App.vue 就写好了，但是所有的组件都要听从 vm 分配管理，所以接下来还要创建 vm

main.js

一般都会创建一个 main.js,有的脚手架叫做 index,作用都是一样的

它的主要作用就是引入 App.vue，并且创建 vm 实例注册 App 组件，所以它也叫入口文件

template 可以直接在这里写，也可以在页面上定义一个 div，里面写<App/>组件标签

这里就有个问题，我们的 el 是一个 id 叫 root 的容器，那么容器在哪？所以需要再创建一个叫 index.html 的文件

index.html

主要用来存放根容器

全部写好之后就可以打开文件在浏览器上查看，发现报错了，浏览器不能直接支持 ES6 的模板化语法

我们代码是没有问题的，只是浏览器不认识，如果使用脚手架，就能马上运行起来，这里这是演示整个流程