Vue组件

组件与插件的区别：

1.组件注册通过components:{TabView}进行注册，而插件通过Vue.use()进行注册.
2.组件是构成App的业务模块，也可以说是架构吧，比如小米网页的底部栏就是一个组件，而插件是属于功能模块，个人理解组件就类似与Html,而插件类似于Js.

组件：

组件就是把一个app或者一个网站的页面给分割成一个个的小的模块，比如导航栏，轮播图，底部栏等等，这每个小模块就是一个组件，通过最后的一个组件汇总到App.vue通过一个Vue文件进行管理也就能组合成一个页面，其实每个.Vue文件都可以看做是一个组件。

组件的创建

1.在创建组件的时候，我们一般会创建一个components的文件夹，他就是组件的意思，这里存放所有的组件方便管理，
2.创建一个.vue文件，名字随便起，但是要注意，名字一定要含有两个大驼峰，也就是含有两个不连续的大写字母，比如：UserView.vue,LoginView.vue,

3.创建好.vue文件之后就是写组件了，一个组件通常包含三个部分：

<template>
  <div>存放内容的部分</div>
</template>
<script>
    export default{
    存放方法的地方
    }
   
</script>
<style>
    存放样式的地方
</style>

 组件的使用

通常会在App.vue文件里面使用组件，App.vue文件就类似于一个老大哥，每个组件都可以归他管理。在上文我也说过每个.vue文件都可以看做是一个组件App.vue也不例外，所以它也包含了三个部分

<template>
  <div>
      //3.使用组件
      <LoginView></LoginView>
  </div>
</template>
<script>
//1.首先要导入组件
import LoginView from '@/component/LoginView.vue'
    export default{
    //2.然后注册组件
      components:{LoginView} //注册
    }
   
</script>
<style>
    存放样式的地方
</style>

这样我们就成功的注册了一个组件，并使用了一个组件，特别需要注意的一点是，1,.vue文件名要遵循大驼峰写法，不然会出现报错，如果更改了文件名之后需要重新启动一下服务器。 2 ,每个template都有且只能有一个根节点

插件：

插件通常是同来为Vue添加全剧功能的，插件的功能范围没有严格的限制，我们最常用的就是添加Vue实例方法，通过把他们添加到Vue.prototype上实现，

编写插件：

1.我们需要建立一个plugin文件夹，它就是插件的意思，把插件统一放在一起

import ToastVue from "./ToastCom.vue";

// 定义一个插件
var Toast = {};
// Vue 的插件 必须实现 install 方法
Toast.install = function (Vue，options) {
    // 02 获取组件的构造函数
    var ToastCom = Vue.extend(ToastVue);
    //03 创建组件的实例
    var instance = new ToastCom();
    //04 挂载到 真实 的dom
    instance.$mount(document.createElement("div"));
    //05 插入到body
    document.body.appendChild(instance.$el);
    //06 关联 Toast 插件
    Toast.show = instance.show;
    Toast.hide = instance.hide;

    //把当前对象挂载到Vue 的原型上
    //Vue 所有的组件和实例都可以使用 $toast 方法
    Vue.prototype.$toast = Toast;
};

// 导出插件
export default Toast;

 Vue插件的实现应该暴露出一个install方法。这个方法的第一个参数是Vue构造器（构造器可以理解为就是构造函数），第二个参数是一个可选的选项对象

插件注册

2.回到main.js文件夹下，我们需要注册插件

import Toast from "@/plugin/Toast/index.js";
//使用插件 （执行Toast 的 install方法）
Vue.use(Toast);

使用插件

    methods: {
        login() {
        //这里的this指的是vue实例，因为在编写插件的时候我们将插件挂在到了vue的原型上了，所以在这里可以直接访问的到
            this.$toast.show();
          }