目录
背景介绍
本文主要介绍使用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