vue组件开发步骤

首先创建components文件夹来存放各个组件‘

然后以开发header组件为例

在components/创建monkey-header文件夹，在这个文件夹里创建monkey-header.vue文件

打开m-header.vue文件，搭建框架

<template>
    
</template>

<script>
export default {
    
}
</script>

<style lang="stylus" scoped>

</style>

然后在template里写html代码，在style里写css样式

<template>
  <div class="header">
    <div class="logoImg"></div>
    <div class="logoTitle">悟空音乐</div>
  </div>
</template>

<script>
export default {
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="stylus" scoped>
  .header
    height 40px
    line-height 40px
    background #4F4F4F
    text-align center
    .logoImg
      width 35px
      height 35px
      display: inline-block
      vertical-align: middle
      background url('../../common/images/logo.png') no-repeat center
      background-size 35px 35px
    .logoTitle
      display: inline-block
      font-size 18px
      color #fff
</style>

我们要让组件在app.vue中显示

首先注册monkey-header这个组件，注意组件名用驼峰式，而且首字母要大写

<script>
import MonkeyHeader  from './components/monkey-header/monkey-header'

export default {
  name: 'App',
  components: {
    MonkeyHeader
  }
}
</script>

在template中引用

<template>
  <div id="app">
    <monkey-header></monkey-header>
  </div>
</template>

然后执行npm run dev运行结果如图