1.项目背景
需求描述：
- 将原有的功能页面抽离，进行优化，降低耦合，大致如下图:
- 将页面B可以开发成独立的，可作为售卖包单独进行售卖的小小功能模块（SDK）
- SDK功能要求
- 提供一个js文件，供客户放调用
- 可以接受参数
- 可以接受SDK内部执行之后的处理事件
- 全局只有一个，单例模式
需求分析：
项目技术栈为vue，封装的SDK可以不依赖任何前端技术栈而运行，打破传统的 iframe 内嵌。始终维护一套代码，可以借助构建命令来构建。
需求结果:
Vue CLI内置了构建应用的功能，省去不少繁琐的配置
2.实际操作
1.首先，package.json 文件添加命令
"lib": "vue-cli-service build --target lib --inline-vue --name vue3SDK src/Lib.js"
命令解释：
-
1.入口文件的选择：【src/Lib.js】 vue-cli 默认是以 src/App.vue为入口，基于灵活配置，可以接受参数，处理事件，故而选择了以 js 文件为入口
-
2.--inline-vue 命令： 构建的SDK不局限任何前端框架，所以要把 vue 运行环境 内置
-
3.--name vue3SDK 命令： 构建的SDK的名字，自己可以修改
-
4.--target lib 命令： 构建的目标
2.入口的 js 文件（这才是重点）
import App from '../src/App.vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'
class Vue3SDK {
constructor(option) {
if (!Vue3SDK.instance) {
Vue3SDK.renderDom(option)
Vue3SDK.instance = this
}
return Vue3SDK.instance
}
// 渲染vue
static renderDom(option) {
// 1.创建挂载节点
// 2.vue挂载
// 3.接受外部参数
const { dom, ...restOpt } = option
const app = createApp(App, restOpt)
app.use(createPinia()).use(ElementPlus)
// 传入dom节点
// 不传入会挂载在body下
if (dom) {
app.mount(dom)
} else {
// 1.创建挂载节点
const outer = document.createElement('div')
outer.setAttribute('id', 'Vue3SDK')
document.body.appendChild(outer)
app.mount('#Vue3SDK')
}
}
// 初始化
static init(option = {}) {
if (!this.instance) {
this.instance = new Vue3SDK(option)
}
return this.instance
}
}
export default Vue3SDK
3.vue.config.js 配置文件的修改
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
css: {
extract: false // 是否使用css分离插件 ExtractTextPlugin
},
configureWebpack: {
output: {
libraryExport: 'default'
}
}
})
3.最后的效果
1.产出文件：
2.sdk 的使用方式
<!doctype html>
<meta charset="utf-8">
<title>vue3SDK demo</title>
<style>
#App {
text-align: center;
}
</style>
<body>
<div id="App"></div>
</body>
<script src="./vue3SDK.umd.js"></script>
<script>
console.log('object :>> ', vue3SDK);
const rootDom = document.querySelector('#App')
const onStop = () => {
console.log('onStop :>> ')
}
const onStart = () => {
console.log('onStart :>> ')
}
const defaultCount = 4
vue3SDK.init({dom: rootDom ,onStart, onStop, defaultCount })
</script>
3.大致页面
4.总结分析
- lib是解析不了router
5.源码仓库
- gitee.com/xiaxn/vue3-… 如果有不足的地方，还请多包含！
- 感谢前辈给的思路 ☞ zhuanlan.zhihu.com/p/269129503
