<div align="center" style="display: flex; flex-direction: column; align-items: center;">
<img src="./docs/logo.svg" width="256" />
<br />
<h1 style="margin: 10px 0 0">Mini Sandbox</h1>
<p>一个前端【代码/组件】的可视化方案，融合了【在线编辑 & 实时预览】等特点</p>
<p>
<a href="https://github.com/buuing/mini-sandbox/stargazers" target="_black">
<img src="https://img.shields.io/github/stars/buuing/mini-sandbox?color=%236a90e1&logo=github&style=flat-square" alt="stars" />
</a>
<a href="https://www.npmjs.com/package/mini-sandbox" target="_black">
<img src="https://img.shields.io/npm/dm/mini-sandbox?color=%23ffba15&logo=npm&style=flat-square" alt="npm" />
</a>
<a href="https://www.jsdelivr.com/package/npm/mini-sandbox" target="_black">
<img src="https://data.jsdelivr.com/v1/package/npm/mini-sandbox/badge" alt="jsdelivr" />
</a>
<a href="https://github.com/buuing" target="_black">
<img src="https://img.shields.io/badge/Author-%20buuing%20-6a90e1.svg?&logo=github&style=flat-square" alt="author" />
</a>
<a href="https://github.com/buuing/mini-sandbox/blob/master/LICENSE" target="_black">
<img src="https://img.shields.io/github/license/buuing/mini-sandbox?color=%236a90e1&logo=github&style=flat-square" alt="license" />
</a>
</p>
</div>
<br />
## Feature & 功能亮点 <!-- {docsify-ignore-all} -->
- 可以在线编辑前端【代码 / 组件】, 并实时预览代码效果
- 代码**自动保存到 URL 上**, 分享网址即可分享代码
- 静态资源全局缓存, **多个 Sandbox 之间资源共享**, 拒绝浪费请求
- 支持动态【 import / export 】引入或导出其他标签页的代码
- 支持【 [`Vue SFC`](https://buuing.github.io/mini-sandbox/vue-sfc.html) / [`React SFC`](https://buuing.github.io/mini-sandbox/react-sfc.html) 】单文件组件
- **纯前端部署**, 不依赖服务器, 静态页即可实现编辑和预览功能
<br />
## Document & 官方文档
- [官方文档 & 演示地址](https://buuing.github.io/mini-sandbox)
<br />
## Usage & 使用
- [在 javascript 中使用](https://buuing.github.io/mini-sandbox/#/docs/usage)
- [在 docsify 中使用](https://buuing.github.io/mini-sandbox/#/docs/usage-docsify)
- [在 vuepress 中使用](https://buuing.github.io/mini-sandbox/#/docs/usage-vuepress)
<br />
## 赞赏码
- **Bug 反馈请直接去 Github 上面提 Issues,** 我会实时收到邮件提醒前去查看
- 如果是小白需要技术指导的话, 下边是我的赞赏码, **备注好你的微信号,** 我看到后会主动加你
- 但如果是因为我文档没写清楚，或者是插件本身的bug，导致你无法正常使用的话，赞赏全额返还
<img src="https://unpkg.com/[email protected]/imgs/pay.png" width="256" />
**请备注好你的`微信号`**
<br />
## 谁在使用
- [🎁 lucky-canvas 【大转盘 / 九宫格 / 老虎机】抽奖插件](https://100px.net/playground.html)
- [🎁 right-menu 一个功能强大的右键菜单插件](https://buuing.github.io/right-menu/#/docs/options)
> 欢迎通过 PR / ISSUES 补充（要求链接地址为使用该插件的页面）
<br />
一个前端【代码组件】的可视化方案
版权申诉
68 浏览量
2023-10-22
08:39:59
上传
评论
收藏 433KB ZIP 举报
一个前端【代码组件】的可视化方案，融合了【在线编辑&实时预览】等特点；可以在任意js环境下，包括【docsifyvuepress】文档类项目中使用；支持VueSFCReactSFC单文件组件.zip （51个子文件） 
mini-sandbox-master 
_sidebar.md 483B rollup.config.dev.js 3KB .eslintrc.js 820B rollup.config.build.js 3KB
vue-test.html 253B .nojekyll 12B src type.ts 2KB plugins docsify-plugin.ts 3KB loaders react-loader.ts 1KB base-loader.ts 730B html-loader.ts 1KB vue-loader.ts 1KB index.ts 3KB vue2-loader.ts 2KB config.ts 12KB style index.less 5KB theme.less 116B utils.ts 3KB index.ts 17KB LICENSE 1KB vue-sfc.html 3KB .babelrc 97B docs history.md 2KB
wx.png 155KB test.md 643B MONACO.TTF 64KB prism-bash.js 4KB react.md 9KB html.md 7KB usage.md 748B options.md 4KB
logo.svg 10KB temp.jpeg 116KB usage-vuepress.md 2KB vue.md 5KB usage-docsify.md 5KB docsify.js 106KB README.md 76B package.json 2KB ss.md 37B .npmignore 1B index.html 3KB .gitignore 260B .eslintignore 38B vue2-sfc.html 2KB tsconfig.json 596B react-sfc.html 3KB demo.html 2KB README.md 3KB fonts element-icons.woff 28KB element-icons.ttf 55KB资源评论
