創(chuàng)建一個(gè)src/components文件夾 用于存放組件

頭部組件
<template>
          <div>
                    <h2 class="header">這是一個(gè)頭部組件</h2>
        </div>
</template>
<script>
    export default {
        data(){
            return{
                msg:'這是一個(gè)頭部組件'
            }
        }
    };
</script>
<style lang="scss">
    .header{
    background:#000;
    color:#fff;
}
</style>

主頁組件

<template>
    <!-- 所有的內(nèi)容要被根節(jié)點(diǎn)包含起來 -->
    <div id="home">
            <v-header></v-header>
            <br>
            <hr>
            <h2>這是一個(gè)首頁組件--{{msg}}</h2>
            <button @click="run()">執(zhí)行run方法</button>
    </div>
</template>
<script>
    //引入頭部組件
    import Header from './Header.vue';
    export default{
        data(){
            return {
                msg:'我是一個(gè)首頁組件msg'
            }
        },
        methods:{
            run(){
                alert(this.msg);
            }
        },
        components:{
            'v-header':Header
        }
    }
</script>
<style lang="scss" scoped>
    /*css  局部作用域  scoped*/
    h2{
        color:red
    }
</style>

新聞組件


<template>
    <div>
        <v-header></v-header>
        <h2>這是一個(gè)新聞組件</h2>
            <ul>
            <li >
                    111111
            </li>
            <li>
                          2222
            </li>
            <li>
                          333333
            </li>
        </ul>
    </div>
</template>
<script>
  //引入頭部組件
   import Header from './Header.vue';
    export default {
           data(){
            return{
                msg:'我是一個(gè)新聞組件'
            }
        },components:{
            'v-header':Header
        }
    };
</script>

src/model/storage.js 封裝storage.js

//封裝操作localstorage本地存儲(chǔ)的方法   模塊化的文件
// nodejs  基礎(chǔ)
var storage={
    set(key,value){
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },remove(key){
        localStorage.removeItem(key);
    }
}
export default storage;

組件的使用 App.vue

1、引入組件

2、掛載組件

3、在模板中使用

<template>
  <div id="app"> 
         <v-home></v-home>
     <hr >
     <br>
     <v-news></v-news>
  </div>
</template>
<script>
  /*
  1、引入組件

  2、掛載組件

  3、在模板中使用
  */
   import Home from './components/Home.vue';

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

   export default {     
      data () { 
        return {
         
         msg:'你好vue'
        }
      },
      components:{   /*前面的組件名稱不能和html標(biāo)簽一樣*/
        'v-home':Home,
        'v-news':News
      }
    }
</script>


<style lang="scss">


</style>