vue如何編寫組件能夠經過Vue.use()使用

通常平時用別人的組件時都是經過import引入而後Vue.use()來使用，那麼如何讓咱們寫的組件也能夠用這種方式使用呢？

1.首先新建一個文件夾例如：Home，而後在該文件中新建兩個文件Home.vue和index.js

2.在Home.vue中和往常同樣如：

<template>
    <div id="Home">
        <h1>加上點加雞蛋</h1>
    </div>
</template>
<script>
    export default{
        name:"Home"
    }
</script>

複製代碼

3.接下來是index.js的編寫（主要）

import Home from './Home.vue'
// install方法必須有
export default{
    install:function(Vue) {
        Vue.component('Home',Home);
    }
}

複製代碼

4.接下來就能夠在main.js中美美的引入你的組件了

import Home from './components/Home'
Vue.use(Home)

複製代碼

5.使用（在App.vue中）

<div id="app">
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>
    <Home></Home>
</div>

複製代碼

6.效果展現