vue-cli 书写自定义插件

关于查看与定义插件

查看插件
打开modules文件夹，找到任意插件文件夹，找到package.json 查看键名main，即可找到插件真实路径

2.定义插件

插件通过全局方法 Vue.use() 调用，其参数接收对象或函数，如果使用对象，对象内必须拥有一个install方法，如果使用函数，那么这个函数就作为install方法被执行，除此以外，install方法与使用函数方式的第一个参数Vue
Vue.use()方法，需要在new Vue之前被调用

具体使用流程：

创建目录：
一般在脚手架中，在资源src目录下，新建一个插件文件夹utlis，在内新建自定义的插件。例：mystrage.js

书写格式

书写格式.jpg

//定义功能1
let mystorage = {
  getIt:function(key){
    return JSON.parse(window.localStorage.getItem(key));
  },
  setIt:function(key,val){
    window.localStorage.setItem(key,JSON.stringify(val));
  }
}

//定义功能2
let skill2 = { ... }

//导出插件
export default {
  install(vue,option){

      //【1】.添加全局方法
     vue.gloablefn1 = function() {
       console.log('我是全局方法');
     }
      
      //【4】.定义实例方法
      vue.prototype.$mystorage = mystorage;
      vue.prototype.$skill2  = skill2;
      vue.prototype.$op = option
  }
}

引用插件，使用其功能

在入口文件main.js中引入文件
引用注意事项

插件引用

注册插件

import Vue from 'vue'
import mystorage from '@/utlis/mystrage'

Vue.use(mystorage,{a:1})

new Vue({
  ...
})

在单文件组件中，调用实例方法

  this.$mystorage.getIt('login');
  this.$mystoragesetIt('login',{
       islogin:true,
       username:_name
   });
  console.log(this.$op)  //{a:1}

在单文件组件中，调用全局方法

 this.constructor.super.gloablefn1()  //我是全局方法

super - 关键字用于访问父对象上的函数
1.针对当前目录结构

this -> Object ? 组件实例
this.constructor -> VueComponent
this.constructor.super -> Vue()
this.constructor.super.gloablefn1 -> 是我们插件定义中的全局方法

如果在入口文件main.js内调用全局方法

Vue.gloablefn1();  //直接就可以拿来用了，比组件内要方便，？组件层级嵌套深度与super的关系?

全局调用的方法，在单文件组件中，通过this查看位置

super说明

构造函数语法区别

ES5 语法

    function person(txt){   //工厂函数
        this.name = txt;    //属性    
    }
    person.prototype.say = function(){    //原型上的方法
        console.log('hi es5, i am '+ (this.name))   //方法
    }
    
    var P1 = new person('张三');
    P1.say();   //hi es5, i am 张三

ES6语法

      class person2 {
        constructor(txt){    //相当于ES5的工厂函数
            this.name = txt;    
        }
        say(){    //方法
            console.log('hi es6, i am '+ (this.name))   //方法    
        }
    }
    
    var P2 = new person2('李四');
    P2.say()    //hi es6, i am 李四

未完待续...

最后编辑于：2021.11.15 22:57:04