2.0.0 • Published 2 years ago
wccode-demo v2.0.0
基于: demosify 项目,稍微修改了一下,增加了三级目录.节点过滤
fix: 重复路由点击报错(vue router ≥ v3.1 后 ，回调形式改成promise api了，返回的是promise，如果没有捕获到错误，控制台警告程序卡死)
1.0.0 支持无限嵌套，部分代码优化。
{
"label": "framework2",
"src": "framework2",
"children": [
{
"label": "Vue2",
"src": "vue22",
"children": [
{
"label": "vue222",
"src": "vue222"
}
]
},
{
"label": "React2",
"src": "react test2"
}
]
}👉🏻 website | 👉🏻 online demo
DEMOSIFY
Create a playground to show the demos of your project.
Quick start
- install wccode-demo
npm install wccode-demo --save-dev- Create
.demosrc.jsfile in your project root.
module.exports = {
name: 'YOUR PROJECT NAME',
}- Create
demosdirectory in your project root. Add your demos indemosdirectory.
mkdir demos
mkdir demos/demo1- Create a
config.jsfile in each of your demos, e.g.demos/demo1.
// config.js
const javascript = `console.log('this is a demo')`;
export default {
javascript,
}- Create a
.demoList.jsonfile in yourdemosdirectory. Specify all your demos show in sidebar.
[
"demo1",
// ...
]多级,三级
[
{
"label": "RawData",
"src": "rawdata test"
},
{
"group":"framework",
"label": "framework",
"src": "framework",
"demos": [
{
"label": "Vue",
"src": "vue test"
},
{
"label": "React",
"src": "react test"
},
{
"group":"framework2",
"label": "framework2",
"src": "framework2",
"demos": [
{
"label": "Vue2",
"src": "vue test2"
},
{
"label": "React2",
"src": "react test2"
}
]
}
]
}
]- Add NPM scripts in your
package.json:
"scripts": {
"demo:dev": "demosify --serve",
"demo:prod": "demosify --prod"
}- Run
npm run demo:dev, visithttp://localhost:3030. You will see the playground. ✌🏻
Load sample files
You can load sample files though config.js.
export default async () => {
const [javascript, html, css] = await Promise.all([
import('!raw-loader!./index.js'),
import('!raw-loader!./index.html'),
import('!raw-loader!./style.css'),
]);
return {
javascript,
html,
css,
}
}Add index.js, index.html and style.css files in your demo directory.
console.log('This is a demo.');<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DEMO</title>
</head>
<body>
<div id="app"></div>
</body>
</html>/* demo stylesheet */
body {
background-color: red;
}These files will be loaded to your playground.
Deploy
Run npm run demo:prod.
All the demos will be deploy to production into dist directory of your project.
Thanks to
Special thanks to Poi.
Demosify is inspired and powered by Poi.