# vue-cli-plugin-readme

**Repository Path**: zglzglzgl/vue-cli-plugin-readme

## Basic Information

- **Project Name**: vue-cli-plugin-readme
- **Description**: 我们可以在任何源码中写 markdown，并且提供了一个可交互的markdown管理客户端。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 16
- **Forks**: 0
- **Created**: 2021-08-26
- **Last Updated**: 2021-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![](./doc/images/readme-logo.png)
<div align="center">
  <h1>Vue-Cli-Plugin-Readme</h1>
  <p>我们可以在任何源码中写 markdown，并且提供了一个可交互的markdown管理客户端。</p>
</div>

<h2 align="center">视频教程</h2>
视频地址：

https://www.bilibili.com/video/BV1fM4y1V7uv

<Br/>

![](./doc/images/screenshot.jpg)

<h2 align="center">安装方法</h2>

vue-cli-2.0请移步：

https://gitee.com/zglzglzgl/readme-webpack-plugin

1.  cli

```bash
vue add readme
```

2. vue-cli UI

<Br/>

![](./doc/images/ui-install.jpg)



启动项目后，终端会提示一个地址：http://localhost:1234

![](./doc/images/terminal.jpg)  

<Br/><Br/>


<h2 align="center">使用方式</h2>

1. 两种创建记录的语法

    书写一条记录语法会在客户端生成一个记录。

    - 类HTML注释语法

    ```
        <!--## 
        #{1 - type - title}# 
        markdown
        ###-->
    ```

    - 类JavaScript注释语法

    ```
        /*#### 
        #{1 - type - title}# 
        markdown
        ####*/
    ```

2. 关联记录
   
   通过标题最后一个参数去关联父记录的id

   ![](./doc/images/associatedrecord.jpg)



3. 删除记录
   
  ![](./doc/images/del.jpg)



4. 更新源码
   
  ![](./doc/images/update.jpg)


5. 与已有 markdown 进行整合

   在项目根目录下新建一个BASE-README.md文件，此文件中的markdown自动被收集到客户端中。
   
   ![](./doc/images/base.jpg)


<Br/><Br/>

<h2 align="center">原理图</h2>

<Br/><Br/>

![](./doc/images/framework.jpg)

<Br/><Br/>


<h2 align="center">VScode代码片段</h2>

   配置代码提示后，输入‘#’号提示记录语法模板

![](./doc/images/codetip.jpg)


 ```
 "JS readme-webpack-plugin template syntax1": {
      "scope": "",
      "prefix": "#",
      "body": [
        "/*#### \n #{1 - todo - title}# \n markdown \n ####*/"
      ],
      "description": ""
},

"HTML readme-webpack-plugin template syntax2": {
      "scope": "",
      "prefix": "#",
      "body": [
        "<!--## \n #{1 - todo - title}# \n markdown \n ###-->"
      ],
      "description": ""
}

 ```


 <h2 align="center">注意事项</h2>