vue-组件

1、安装vue-cli：

cnpm install -g vue-cli

2、初始化

vue init webpack-simple myProject

3、安装

cnpm install

4、运行

cnpm run dev

App.vue代码如下：

<template>
  <div>
    <Vheader></Vheader>
    <Vcontent></Vcontent>
    <Vfooter></Vfooter>
  </div>

</template>

<script>
  import Vheader from './components/Vheader'
  import Vcontent from './components/Vcontent'
  import Vfooter from './components/Vfooter'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    Vheader,
    Vcontent,
    Vfooter
  }
}
</script>

<style>

</style>

　　Vheader.vue

<template>
	<header>
		{{msg}}
	</header>
</template>

<script>
	export default {
		name: 'Vheader',
		data(){
			return {
				msg: '我是头部！'
			}
		}
	}

</script>

<style>

</style>

　　Vcontent.vue

<template>
	<div>
		{{msg}}
	</div>
</template>

<script>
	export default {
		name: 'Vcontent',
		data(){
			return {
				msg: '我是中部！'
			}
		}
	}

</script>

<style>

</style>

　　Vfooter.vue

<template>
	<footer>
		{{msg}}
	</footer>
</template>

<script>
	export default {
		name: 'Vfooter',
		data(){
			return {
				msg: '我是脚部！'
			}
		}
	}

</script>

<style>

</style>