首页 > 其他分享 >使用vue、elementUI开发一个js SDK

使用vue、elementUI开发一个js SDK

时间:2022-10-29 23:25:19浏览次数:112  
标签:instance vue cli jsSDK elementUI js callback options

目录

背景介绍

本文主要介绍使用vue、elementUI开发一个有登录、以及其他功能的jsSDK包,给第三方的人调用,方便第三方用户集成开发。

实操步骤

初始化项目

1. 初始化vue 项目

vue create jssdk
具体操作请查阅vue-cli-创建一个项目或其相关博客内容

2. 查阅vue-cli构建目标内容

查阅地址vue-cli-构建目标

3. 具体操作步骤

1. 在package.json文件中添加命令

  "lib": "vue-cli-service build --target lib --inline-vue --name jssdk src/jssdk/index.js"

其中 --name 后是包名,以及入口路径

2. 添加入口文件

新建src>jsSDK>index.js

/* eslint-disable no-unused-vars */
import Vue from "vue";

// import login from './login/loginSdk.vue'
// import auth from './auth/authSdk.vue'

class jsSDK {
  constructor(options, callback) {
    if (!jsSDK.instance) {
      jsSDK.render(options, callback);
      jsSDK.instance = this;
    }
  }

  static render (options, callback) {
    if (options === void 0) {
      options = {
        el: "#app",
        appId: "",
        ability: 'login',
        success: Function
      };
    }
    this.options = Object.assign({}, options);
    console.log(this.options)
    const el = this.options.el;
    new Vue({
      render: (h) => h(require(`./${options.ability}/${options.ability}Sdk.vue`).default, { props: this.options }),
      props: {
        ...options
      },
      mounted () {
        callback && callback();
      }
    }).$mount(el);
  }

  static init (options, callback) {
    if (!this.instance) {
      this.instance = new jsSDK(options, callback);
    }
    return this.instance;
  }
}

export default jsSDK;

标签:instance,vue,cli,jsSDK,elementUI,js,callback,options
From: https://www.cnblogs.com/mynl/p/16838793.html

相关文章

  • Vue的父子传值方法
    Vue的父子传值方法子传父要点:通过自定义事件触发父级方法来进行修改父级数据总结:1.在父组件中定义修改数据方法2.在模板中绑定触发自定义事件的事件3.调用子组件的......
  • js字符串转字节
    functionstringToByte(str){varlen,c;len=str.length;varbytes=[];for(vari=0;i<len;i++){c=str.charCodeAt(i);if(c>=0x010000&......
  • 【Echarts】Vue3 + TS 封装一个建议的Echarts组件
    <template><divref="myChartsRef":class="className":style="{height:height,width:width}":option="option"></div></template><scriptsetuplang='ts'>......
  • 【Vue3】ref, reactive, shallowRef, shallowReactive, toRaw, markRaw, readonly, sh
    ref的实现ref实现响应式(基本类型)也是采用Object.definedProperty()来实现的getter和setterref实现响应式(对象类型)也是采用Proxy来实现(底层调用reactive方法)reac......
  • python 与C++ 利用socket实现json数据传输
    单机python与C++程序利用socket实现json数据传输目录单机python与C++程序利用socket实现json数据传输需求实现方法的选择具体实现流程图示涉及到的技术1socket......
  • js中.?、??、??=的用法和含义
    一、可选链(.?)如果一个值为null、或者是undefined那么我们再去用点操作符去调用一个方法或者访问一个属性会发生什么?其实这种情况就相当于直接在undefined上面访问na......
  • 使用vue框架的前后端分离开发打通
    在前后端混合开发的模式中,我们可以在django中的模板页面直接书写jquery的ajax语法,向后端发送请求但是在前后端分离的开发模式中,前端一般是使用vue框架进行搭建的,而vue需要......
  • Vue3——Transition TransitionGroup
    Vue3TransitionTransitionGroup官网地址:https://cn.vuejs.org/guide/built-ins/transition.html官网讲得很详细我就只写基本用法了目录Vue3TransitionTransitionGr......
  • 【2022-10-29】前端Vue框架(四)
    一、计算属性计算属性实现首字母大小写<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"......
  • vue中动态引入图片为什么要是require, 你不知道的那些事
    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进......