使用vuepress创建仿element的说明文档

 

原理说明

 

vuepress是支持在markdown文件里面直接写vue代码的，那么我们要实现代码和代码效果共存时，最简单的办法，把代码写两份，一份放在pre 里展示代码, 一份直接用来展示效果。

人类的进步很大一部分是原因是来源于偷懒，不想一份代码写两遍，copy一下，也让文档不好看。偷懒的方法来了，继续往下看：

方法一：

 

借助 Vuepress 会自动注册 components 目录下组件的特性，或者通过 enhanceApp.js 钩子自己注册示例代码文件，然后使用 <<< @/filepath 语法将示例代码文件引入

这个方法不好的地方在于组件需要全局注册

## 示例代码如下

<demo></demo>

<<< @/docs/.vuepress/components/demo.vue

 

**方法二：**　

 

vuepress 也是有生命周期的，我们可以写一个vuepress插件，在插件里把代码进行拆分组装后，按格式存放在data-里面，然后在vuepress的更新时，使用vue.extend创建实例，并挂载到一个对应的元素上。可以在git 上搜一下vuepress-plugin-demo-block-master　，这个哥们就是用的这种方法

 

 

**方法三：**

 

一步到位，在vuepress插件里，先将代码块作为vue组件进行编译，再把编译后的组件插入页面里面。代码看　https://github.com/wfwfwf/vue-blog。

效果看 https://wfwfwf.github.io/vue-blog/dist/demo/d-border.html