一、组件理解：

1、组件可以是说vue最核心的了，它可以扩展 HTML 元素，封装可重用的代码。组件就像我们布局的模板可以相互之间引用。官方的理解是项目抽象为一个组件树。

2、注册组件语法格式：

Vue.component(tagName, options)，tagName 为组件名，options 为配置选项。

3、组件调用：

4、组件中的data必须是函数

5、组件通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。

6、通过props属性，父组件可以向子组件传递数据，而子组件的自定义事件就是用来将内部的数据报告给父组件的。

7、通过使用保留的元素，动态地绑定到它的 is 特性，可以让多个组件使用同一个挂载点，并动态切换：

二、简单项目组件应用步骤：

1、环境搭建及要求（不再叙述）nodejs+npm+vue+vue-cli+webpack，安装好后文件基本上是这样的，路径自己选择，项目名称自己命名就可以了。

2、启动运行项目：npm run dev

3、修改默认的配置和文件，我的项目路径是：E:project01srccomponentsviews，在下面新建三个组件

vheader.vue组件是项目通用的头部，内容如下：

vlist.vue组件是列表显示及组件，内容如下：

4、修改E:project01src下main.js文件

import Vue from 'vue'
import vlist from './components/views/vlist'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '',
 components: {vlist}  
})

5、修改E:project01srcrouter下index.js文件

import Vue from 'vue'
import Router from 'vue-router'
//list
import vlist from'@/components/views/vlist'
Vue.use(Router)
export default new Router({
 routes: [  
  {
     path: '/vlist',
     name: 'vlist',
     component: vlist
   }
 ]
})

6、浏览器输入  刷新后显示如下：