一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码

要修改的文件
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Header.vue
│ │ ├── Home.vue
│ │ └── News.vue

App.vue

<template>
  <div id="app">
<v-home></v-home>
<hr>
<br>
<v-news></v-news>
  </div>
</template>

<script>
/*
import components
Local Registration components
use in template
*/

import Home from './components/Home.vue';
import News from './components/News.vue';


export default {
  name: "app",
  data() {
    return {
      msg:'hello vue world!',     
    };
  },
  components:{
    'v-home':Home,
    'v-news':News
  }
};
</script>

<style>

</style>

Header.vue

<template>
    <div class="header">
        {{msg}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg:'this is a head component'
        }
    },
    methods :{
        
    }
}
</script>

<style>
.header{
    background:#000;
    color: #fff;
}
</style>

Home.vue

<template>
    <!-- all content need in root-->
    <div id="home">
        <v-header></v-header>
        <h2>{{msg}}</h2>

        <button @click="run()">run fuction</button>
    </div>
</template>

<script>
import Header from './Header.vue'

export default {
    data(){
        return {
            msg:'i am home component!'
        }
    },
    methods :{
        run(){
            alert(this.msg)
        }
    },
    components:{
        'v-header':Header
    }
}
</script>

<style>

#home h2{
    color: red;
}
</style>

News.vue

<template>
    <div>
        <v-header></v-header>
        {{msg}}
        <ul>
            <li>
                111
            </li>
            <li>
                222
            </li>
            <li>
                333
            </li>
        </ul>
    </div>
</template>

<script>
import Header from './Header.vue'

export default {
    data(){
        return {
            msg:'i am a news component!'
        }
    },
    methods :{
        
    },
    components:{
        'v-header':Header
    }
}
</script>

五 运行

npm run dev

image.png

六 总结

1 组件使用
《1 新建vue文件，创建<templete></templete>填充组件内容
《2 在要使用组件的地方，导入组件，并注册组件标签
import Home from './components/Home.vue';

export default {
components:{
'v-home':Home,
}
};

《3 在html标签，使用标签来使用组件
如：<v-home></v-home>

七 参考

https://cn.vuejs.org/v2/guide/components.html