📹 起因
今年我开发了一个 Vue3 的 hook 库 vue-hooks-plus ,我是一个比较有追求的人，于是前前后后使用 vitepress 写了文档、vitest写了测试用例、写了 CI等等。
有没有觉得缺少了什么？少了 playground在线编码的功能，我不想在一些在线代码网站存自己的代码然后跳路径过去，因为工作量翻倍，于是前期我fork白嫖了 vueuse 的 playground 的代码，注入了自己的库后再部署到自己的服务器，由于服务器拉垮，部署=没部署。而且示例demo的代码不能携带代码注入进去。因为代码结构和复杂度比较高，成本太高，所以就放弃了。
🔬 发现
后来我发现 playground 都有个分享功能，URL 后面接了一串字符串，乍一眼一看这不是base64编码？
💡灵感来了，要是我能将自己的内容转成 base64链接到这个URL后面不就可以显示我自己的内容了嘛。于是我瞄准了vue的 https://sfc.vuejs.org/，它的 playground源码阅读比较轻松省事，我发现它解析出base64 是一个对象，里面的键是vue组件的名称，值是template模版字符串。
🔉 骚操作
各位掌握这个方法，可以随便写vue代码的示例，不管你是写库还是分享代码，都是 so easy ！
这里不过多叙述它的源码 ，主要是解析出base64 是一个对象然后进行其他操作。
请看 👇
str.ts
export const str = `<template>
<div>test</div>
</template>
<script lang="ts" setup>
import { useExternal } from 'vue-hooks-plus'
useExternal('https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css')
</script>
<style scoped lang="less"></style>`
index.vue 建议别在.vue定义字符串模版，反正我的会报错。。。
<script lang="ts" setup>
// 引入 str 字符串变量
import { str } from './str'
// 引入 base64 库
import { encode } from 'js-base64'
// 引入 vue sfc 官网地址
const sfcBaseUrl = 'https://sfc.vuejs.org/'
const sfcPlaygroundUrl = () => {
// 多文件
const sfcJson: any = {
'App.vue': str,
'App2.vue': str,
}
try {
// 特定字段，引入外部的库，你可以引入你自己的库文件
sfcJson['import-map.json'] = JSON.stringify({
imports: {
'vue-hooks-plus': 'https://unpkg.com/vue-hooks-plus@1.4.0/dist/js/index.es.js',
},
})
} catch {}
return `${sfcBaseUrl}#${encode(JSON.stringify(sfcJson))}`
}
</script>
到这里就完成了，我们直接跳转 sfcPlaygroundUrl 即可看到自己的模版文件被解析，而且还能引入自己的库，我引入了 vue-hooks-plus 这个库。useExternal 用于加载外部 css 或者 js ,可以看到css文件已经被加载，同时 App1.vue App.vue 也已经有了，右边👉 展示了 test 文字。
成功 ✅，及其简单，还不赶快试试！
既有学习技术的过程，又能白嫖资源心里乐开花，美滋滋。说真的，我称为高质量白嫖。
👋 更多
👇 是我写的库，文档里面已经支持跳转vue sfc官网展示运行。
大家多多体验 & 支持 🌟🌟
