njleonzhang / docsify-demo-box-vue Goto Github PK

View Code? Open in Web Editor NEW

29.0 1.0 36.0 2.6 MB

write Vue demo in docsify with instant preview and jsfiddle integration

Home Page: https://njleonzhang.github.io/docsify-demo-box-vue/.

License: MIT License

JavaScript 63.79% HTML 0.95% Vue 33.56% Shell 1.70%

docsify-demo-box-vue's Introduction

docsify-demo-box-vue

write Vue demo in docsify with instant preview and jsfiddle integration

Your sample code can be rendered on the page instantly, so the people who read your document can see the preview immediately. If he/she expands the demo box, the source code and description are shown there. Click the button Try in Jsfiddle, jsfiddle.net will be open with the code of this sample.

Doc

This plugin is for Vue. For React, please use docsify-demo-box-react

Showcase

These projects are using docsify-demo-box-vue. Pull requests welcome 😊

Project	Description
vue-data-tables	A simple and customizable data table，based on vue2 and element-ui.

docsify-demo-box-vue's People

Contributors

Stargazers

Watchers

docsify-demo-box-vue's Issues

import doesn`t work in vue template

Hi, i have some problem with import custom component in vue template. I use export default, but tryed model.export.

Please help me;)

Add config to choose http or https jsfiddle?

This project is very helpful. However, i found that this project is using an https jsfiddle api, which means i have to move all my js/css resources served into an https server, which is hard when my components is still developing or even not published. So, is it possible to add a config to choose http or https jsfiddle api?

vue react 无法同时使用？

自己搭建的文档上会同时存在 vue 和 react 组件（不同的 md 文件），单独配置任何一个都没问题，但是同时启用就不行，放前边的 vue 不生效，后边的 react 能渲染出来，但无法查看源码。代码均使用的文档中的示例代码。

  DemoBoxVue.create(jsResources, cssResources, bootCode),
  DemoBoxReact.create(jsResources, cssResources, bootCode)

Is support component style?

/*vue*/
<template>
…
</template>
<script>
…
</script>
<style>
  //css is here
</style>

Thank you!

 <script src="//unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/docsify-demo-box-vue/dist/docsify-demo-box-vue.min.js"></script>
  <script>
var jsResources = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>';
var cssResources = '@import url("//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");';
var bootCode = 'var globalVariable = "leon"';
var globalVariable = "leon" ;
window.$docsify = {
    name: '',
    repo: 'https://github.com/njleonzhang/docsify-demo-box-vue',
    plugins: [
        DemoBoxVue.create(jsResources, cssResources, bootCode)
    ],
    el: '#main',
    executeScript: true
}
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

node: v8.9.4
docsify-cli: 4.2.1

由于 `docsify-demo-box-vue` 插件导致 markdown 的配置失效

正常运行的配置 markdown: { breaks: true, },
添加插件文件 docsify-demo-box-vue.js
初始化插件 plugins: [ DemoBoxVue.create(jsResources, cssResources, bootCode) ]
导致 markdown: { breaks: true, }, 失效

Markdown configuration disabled due to `docsify-demo-box-vue` plugin

Normal operation configuration markdown: { breaks: true, },
Add plugin file docsify-demo-box-vue.js
Initialization plugin plugins: [ DemoBoxVue.create(jsResources, cssResources, bootCode) ]
Lead to failure markdown: { breaks: true, },

How to import vue component?

I have vue component :leafleft-map.vue
How to import vue component to md　file?

本地运行顺利，部署到服务器Vue就报错

错误信息如下

[Vue warn]: Error compiling template:

<article class="markdown-section" id="main"><p>&lt;!DOCTYPE html&gt;</p>

  <meta charset="UTF-8">
  <title>vk-mobile-ui 官方文档</title>
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!-- vkmui组件样式 -->
  <link rel="stylesheet" href="./dist/vkmui.css">
  <!-- 文档自定义样式 -->
  <link rel="stylesheet" href="./style/thame.css">
  <link rel="stylesheet" href="./style/thame-reset.css">


  <div id="app"></div>

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="./js/babel.min.js"></script>
<!-- vkmui组件js -->
<script src="./dist/vkmui.js"></script>
<script src="./dist/flexible.js"></script>
<script src="./js/docsify-demo-box-vue.min.js"></script>
<script src="./js/init.js"></script>
<script src="./js/docsify.min.js"></script>
<script src="./js/external-script.min.js"></script>
</article>

- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
(found in <Root>)

请问这个可能是什么原因呢

Uncaught SyntaxError: Unexpected token export

How solve this error?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script src="//unpkg.com/vue/dist/vue.min.js"></script>
  <script src="//unpkg.com/docsify-demo-box-vue/dist/docsify-demo-box-vue.min.js"></script>
  <script>
    var jsResources = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>'
    var cssResources = '@import url("//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");'
    var bootCode = 'var globalVariable = "leon"'
    var globalVariable = "leon"

    window.$docsify = {
      name: '',
      repo: '',
      plugins: [
        DemoBoxVue.create(jsResources, cssResources, bootCode)
      ]
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>

md:

/*vue*/
<template>
  <div>
    <div class='wrapper'>
      <div>
        <p>author: {{globalVariable}}</p>
        <button :style="style" @click="onClick">test</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        globalVariable,
        style: {
          color: 'blue'
        }
      }
    },
    methods: {
      onClick() {
        alert('author: ' + this.globalVariable)
        this.style.color = 'red'
      }
    }
  }
</script>

Style 能否支持 processor？

目前看在 vue 中写普通 css 没问题，但还不支持解析 scss 之类的（或者有某些配置方式？），不清楚作者有这个计划么？

比如：

/*vue*/
<template>
  <div class="box">
    <div class="sub1">should be red</div>
    <div class="sub2">should be blue</div>
  </div>
</template>
<script>
export default {}
</script>
<style lang="scss">
.box {
  .sub1 {
    color: red;
  }
}
.box .sub2 {
  color: blue;
}
</style>

sub1 的颜色并不会生效，看编译后的代码 scss 并没有转换。

How to add description to try area?

like elementui:

njleonzhang / docsify-demo-box-vue Goto Github PK

docsify-demo-box-vue's Introduction

docsify-demo-box-vue

Showcase

docsify-demo-box-vue's People

Contributors

Stargazers

Watchers

Forkers

docsify-demo-box-vue's Issues

由于 docsify-demo-box-vue 插件导致 markdown 的配置失效

Markdown configuration disabled due to docsify-demo-box-vue plugin

Recommend Projects

Recommend Topics

Recommend Org

由于 `docsify-demo-box-vue` 插件导致 markdown 的配置失效

Markdown configuration disabled due to `docsify-demo-box-vue` plugin