https://github.com/cevio/md-to-vue-loader

compile markdown to vue code and preview code
https://github.com/cevio/md-to-vue-loader

Last synced: 4 days ago
JSON representation

compile markdown to vue code and preview code

• Host: GitHub
• URL: https://github.com/cevio/md-to-vue-loader
• Owner: cevio
• Created: 2017-11-23T05:55:21.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-29T12:33:16.000Z (almost 7 years ago)
• Last Synced: 2024-10-31T17:56:38.248Z (14 days ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# md-to-vue-loader

它是一个将Markdown文件实时编译成Vue文件的一个loader。实现代码块实时渲染的效果。

## Webpack

安装模块：

```bash

npm install --save-dev md-to-vue-loader

npm install --save-dev vue-loader

```

webpack 配置：

```bash

{

  test: /\.md$/,

  use: ['vue-loader', {

    loader: 'md-to-vue-loader',

    options: {...options}

  }]

}

```

## Options

我们使用的是`markdown-it`来编译markdown文件。

整体结构:

```json

{

  "codeWrap": "..../.../componet-wrap-*.vue"

  "markdown": {

    "options": {},

    "plugins": []

  }

}

```

### codeWrap

代码快包裹的VUE文件地址。

此Vue文件包括以下的slot:

- `template` 存放模板HTML

- `script` 存放代码

- `describe` 存放描述

- `title` 存放描述的标题

- `default` 实时代码块

### markdown

- `options` markdown配置

- `plugins` 插件列表

## demo

### codeWrap

```vue

  


    


      


      


    

    


    

  


export default {

  mounted() {

    console.log('mounted');

  }

}

```

### markdown

```markdown

## Example

This is native describe!

At last, you can see it.

```

### demo.vue

```vue

  
Hello, World! - {{a}}


.a{

  color:red;

}

import Vue from 'vue';

export default Vue.extend({

  data() {

    return {

      a: 1

    }

  },

  mounted() {

    setInterval(() => this.a++, 1000);

  }

});

> 测试markdown语法

```

# License

[MIT](https://opensource.org/licenses/MIT) @ [evio](https://github.com/cevio)