学习记录——Vue单页面和组件（全局组件、局部组件）

template：模板，最终会作为页面结构出现在页面中，根标签下只能有一个div，全部内容都写在这个div里边，如果在这个div同级下再写一个div会报错
script ：组件相关的配置
style： 样式
相当于理解成，整个vue文件就是一个组件

认识vue的单文件组件

搭建符合vue单文件组件的开发环境
单文件组件：
vue为了更加形象去编写组件(html,css,js)，发明了一种新型文件类型xxx.vue，通过vue-loader进行webpack的打包成js文件

template标签下只能有一个根元素，所有内容都写在这里面。

vue的组件（核心）
创建组件
组件传值
封装组件
工程化

创建组件
为什么会有组件？逻辑拆分、逻辑复用
全局组件（所有的地方都可以用）
局部组件（只能在某一个页面使用，必须先导出再导入）

创建局部组件

搭建完目录结构及下载相关插件和配置文件后
(直接使用了上一次配置好的：vue结合webpack搭建脚手架)
先去views文件夹，新建Home.vue：随便写个内容 并导出当前组件的实例

再去app.vue: 引入Home组件，并挂载组件，在页面中使用

（因为是直接复制了上次写的文件夹，所以只要在命令行工具中执行 npm install即可下载所有使用到的插件）
执行npm run build打包 再执行npm run dev启动项目
打开浏览器输入localhost:8080 成功显示页面

创建全局组件

1. 创建
   导出一个有组件配置项的对象
   components文件夹随便写一个xxx.vue的组件 见名知意
   比如：新建MyHeader.vue文件
   
   写入内容：
   
   想要将这个文件作为全局组件来使用(可以再任意页面使用)，需要用到vue.component()这个方法 将全局组件挂载到Vue上面
   继续在components文件夹下新建index.js：
   
   然后回到上一级，src文件夹下的index.js文件中，将上面这个全局组件挂载引入：
   
2. 使用
   回到views文件夹下的Home.vue文件里：引入全局组件< MyHeader >< /MyHeader >
   
   打开浏览器输入localhost:8080查看：
   
   再比如其他页面也需要这个全局组件（MyHeader.vue）
   去views文件夹里新建一个Page.vue文件，写一些内容，并使用全局组件MyHeader：
   
   然后回到src目录下的app.vue文件，将Page引入：
   
   打开浏览器查看结果：
   

全局组件概括：

第一步，先新建一个组件
第二步：把当前的全局组件在index.js里引入并挂载（指的是components文件夹下的index.js）
第三步，挂载完之后，把文件引入到入口文件里（也就是src根目录下的index.js）

注意：在components文件夹下的index.js里
Vue.component('MyHeader', MyHeader)
第二个参数就是我们写的组件，要先引入
第一个参数可以随便写，注意的是，这里写的是什么名字，我们在其他页面比如Home里就要写什么名字 template中写 < MyHeader >< /Myheader > ，起了什么名用的时候就用那个名字