什么是Vue的组件
组件是Vue中非常重要的概念，是一个可以重复使用的Vue，是可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。
使用Vue组件的好处
因为组件是可复用的，在绝大多数网页中，很多时候一个项目中的多个页面，可能仅仅是页面元素设计称的一个个组件，所以当需要使用到的时候，直接引用组件即可
创建Vue组件
这里介绍相对简单的一种方式：
第一步：创建一个组件.vue文件（TabsCom.vue）
<template><divclass="tabs"><router-linkclass="link ahome" to="/"></router-link><router-linkclass="link acate" to="/category"></router-link><router-linkclass="link aball" to="/ball"></router-link><router-linkclass="link acart" to="/cart"></router-link><router-linkclass="link auser" to="/user"></router-link></div></template>第二步：在App.vue文件中导入组件
import TabsComfrom"@/components/TabsCom.vue";第三步：注册组件
exportdefault{components:{
TabsCom,},};第三步：使用组件
<template><div id="app"><router-viewclass="pages has-tabs"></router-view><tabs-comclass="tabs"></tabs-com>//<TabsCom></TabsCom>也可以</div></template>Vue插件的创建与使用
什么是Vue的插件
顾名思义：通俗的将vue的插件就是插入在vue内部的组件，是为项目添加全局功能的方式，插件是vue开发过程中的一些工具，在调用的时候只需要很少的代码就可以实现需要的效果，便于后期维护，提升开发效率，一般用于添加全局的方法等
Vue插件的创建
这里也介绍一种最简单的插件（Toast，类似于模态框的效果）
第一步：创建一个组件文件（例：ToastCom.vue）
第二步：创建一个js文件（例：index.js）
第三步：配置创建的ToastCom.vue文件、配置需要的方法，属性等
<template><divclass="toast" v-if="msg">{{ msg}}</div></template><script>// 当文本 msg为空的时候 提示隐藏，有文本的时候显示exportdefault{data(){return{msg:"",};//提示的文本},methods:{//控制显示show(str="加载中...", delay=2000){this.msg= str;// 先手等待2秒隐藏setTimeout(()=>this.hide(), delay);},//控制隐藏hide(){this.msg="";},},};</script>第四步：配置index.js
1、导入组件
import ToastVuefrom'./ToastCom.vue'2、定义一个插件，它是一个对象
var Toast={}3、Vue的插件必须实现install方法（这里特别注意，新手容易忽略）
Toast.install=function(Vue){}接下来在install方法内部
4、获取组件的构造函数
var ToastCom= Vue.extend(ToastVue);5、创建组件的实例
var instance=newToastCom();6、通过$mount手动挂载到真实的dom
instance.$mount(document.createElement("div"));7、渲染到body
document.body.appendChild(instance.$el);8、关联Toast插件
//插件内部自定义的方法
Toast.show= instance.show;
Toast.hide= instance.hide;9、把当前对象挂载到Vue的原型上，Vue所有的组件和实例都可以使用$toast方法
Vue.prototype.$toast= Toast;10、在最外层导出插件
exportdefault Toast;使用
<button @click="$toast.show('XXXX')">自定义通知1</button>到这里，你就学会了最基本的创建和使用简单的Vue插件了。