VUE自定义组件

现在基于vue的UI组件库有很多，比如vant，element-ui等。但有时候这些组件库满足不了我们的开发需求，这时候我们就需要自己写一个插件。

第一个步骤：创建存放插件的文件夹

• 我们创建一个components文件夹下面创建你要写的插件的文件夹，里面有两个文件，一个VUE组件文件，一个js注册组件文件

• index.vue里的代码，我们做了一个盒子

<template>
    <div class="firstdemo">
        <a href="javascript:void(0)">我是组件</a>
    </div>
</template>
<script>
    export default{

    }
</script>

<style>
</style>

• index.js里的代码，注册组件并且暴露出去

import FirstdemoCompponent from './index.vue'
const FirstDemo = {
    install:function (Vue){
        Vue.component('FirstDemo',FirstdemoCompponent)
    }
}
export default FirstDemo

小结 :component(组件的名字，组件本身)

• 接下来我们要在默认的main.js里将刚刚写的index.js文件导入，并通过Vue.use来使用它

import FirstDemo from '.components/global/firstdemo/index.vue'
Vue.use(FirstDemo)

• 然后可以在页面使用了

<template>
<div id="app">
	<first-demo></first-demo>
	<router-view>
</div>
</template>

(未完待续)