Vue插件plugins以及ui插件的使用

Vue插件plugins以及ui插件的使用

插件的使用结构

我们可以在src文件夹下新建plugins包，在内部写js代码插件，如plugins/index.js，插件的作用就是将涉及Vue实例对象的js代码分离到一个js文件中，在导入后能够通过use方式直接执行。

// plugins/index.js文件
export default {
    install(Vue){
        console.log('执行了插件')
        console.log(Vue)  // Vue.use(插件)的方式会传入Vue
    }
}

// Vue使用插件
import plugin from "@/plugins";

Vue.use(plugin)

自定义插件

我们可以在插件中干很多事，实际上这些事可以直接写在main.js中写，但是插件即插即用，增加了程序的解耦合。

如我们可以在插件中进行一些全局的配置，如在install(Vue){}中写：

• 全局变量

  // 全局函数，在任意组件通过this.$axios就可以执行（不用每次用都导入以下axios了）
  Vue.prototype.$axios = axios   
  // 全局变量，在任意组件通过this.$xxxx就可以获取
  Vue.prototype.$xxxx = 'xxxx'
  // 当然也可以在模板中插值或者绑属性使用，加$前缀是为了防止命名污染
  

• 全局混入

  // 使用Vue对象全局混入
  Vue.mixin(obj)
  

• 自定义全局组件

  // 使用Vue对象可以注册全局组件，让它在所有组件都可以使用
  Vue.component(leethon)
  

• 自定义指令

  // Vue的directive方法定义，了解有即可
  Vue.directive("fbind", {
      //指令与元素成功绑定时（一上来）
      bind(element, binding) {
          element.value = binding.value;
      },
      //指令所在元素被插入页面时
      inserted(element, binding) {
          element.focus();
      },
      //指令所在的模板被重新解析时
      update(element, binding) {
          element.value = binding.value;
      },
  });
  

总结：凡是用Vue方法的，在自定义插件中使用就会很方便，因为Vue在使用use时会将自身传入

一般来说，应用者不需要自定义插件，而是借助他人的第三方插件来做到即插即用。

第三方插件使用实例

只要是插件，放到Vue.use()中，就会将Vue传入执行js代码，使Vue拥有一些新功能。

// main.js
import VueRouter from 'vue-router'

Vue.use(VueRouter)

elementui使用 -- 样式UI插件

elementui官方文档

其他常用ui指引

适用于安卓的ui：vant

适用于pc端：elementui，elementui-plus（vue3），iview