基于: 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.js file in your project root.

module.exports = {
  name: 'YOUR PROJECT NAME',
}

Create demos directory in your project root. Add your demos in demos directory.

mkdir demos
mkdir demos/demo1

Create a config.js file 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.json file in your demos directory. 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, visit http://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.

systemctls/demosify

DEMOSIFY

Quick start

Load sample files

Deploy

Thanks to