Vue如何自定义一个组件

具体步骤如下：

1、在compoents文件夹下创建mine文件夹，在其中创建Mine.vue和index.js；

2、Mine.vue代码如下：

<template>
    <div>
        <h3>自定义组件</h3>
        <p>{{msg}}</p>
    </div>
</template>

<script>
export default {
    name: 'Mine',
    data(){
	    return {
	    	msg:"自定义组件---msg"
	    }
	}
}
</script>

<style scoped>
</style>

3、index.js代码如下：

import Mine from './Mine.vue'

const Test={
    install(Vue){
        Vue.component("Mine",Mine)
    }
}

export default Test

4、入口文件main.js中的配置

import Mine from './components/mine'
Vue.use(Mine)

5、在其他的组件中就可以正常使用了

<template>
  <div>
    <Mine></Mine>
  </div>
</template>