目录分析

打开项目，依次分析下目录结构，项目目录结构如下


项目目录结构如下

单文件组件.vue

目完成后，我们看到src 目录下有一个componets 目录，里面有一个 HelloWorld.vue 文件（单文件组件），内容如下

（1）template模板—作用：定义展示模板信息

（2）script 标签—作用：导出组件模块
script中都是js 代码，它定义这个组件中所需要的数据和及其操作

在.vue文件中，export default 后面的对象 就相当于 new Vue() 构造函数中的接受的对象，包含组件数据（data）, 方法methods等。
这时可以看到，export default 后面的对象和new Vue() 构造函数中接受的对象是一模一样的。但要注意data 的书写方式不同。在 .vue 组件中data 必须是一个函数，且需要将数据对象return出来，供组件实现。

（3）style样式表—作用：定义组件模板样式
style主要是定义这个组件的样式，scoped（作用域）表明这里写的css 样式只适用于该组件，可以限定css样式的作用域。

组件导出导出

组件导出
export是ES6的语法，后面的变量可以作为出口传出，在另外的文件里通过 import 接受这个变量并使用，default导出的方式不需要知道变量的名字， 相当于是匿名的， 直接把开发的接口给export
在组件模块中，只能使用export default向外暴露一次

组件导出—name属性
组件导出时可以加name属性（可选），不加name属性或者为空时默认为组件文件名（大驼峰格式）


组件模块的导入读取可以通过两种方式：

组件导入步骤
（1）在基础组件文件夹下新建单文件组件BannerComponent.vue

（2）设置轮播图组件模块的数据、方法、样式，并导出


（3）在根组件App.vue通过import…from…导入

（4）组件选项引入：导入成功后，组件在模板的使用需要通过components选项

（5）引用组件：最后组件元素想显示到页面上，需要在HTML中引用组件标签，之后便组件模块引入使用完毕。（标签对也可单标签）


通过以上步骤便可以在页面中实现组件的导出和导入使用

（1）export default导出
（2）import … from …导入
（3）components组件选项命名引入
（4）template模板通过标签引用
注意事项：template模板中必须有一个跟文件