如何使用VuePress搭建一个类型element ui文档

（5）在Markdown 使用Vue—–插入按钮样式

#先写一个按钮组件.vuepressdocs.vuepresscomponentssrcbutton.vue

<template>
 <button
  class="dt-button"
  @click="handleClick"
  :disabled="disabled"
  :autofocus="autofocus"
  :type="nativeType"
  :class="[
   size ? 'dt-button--' + size : '',
   type ? 'dt-button--' + type : '',
   {
    'is-disabled': disabled,
    'is-round': round,
    'is-plain': plain
   }
  ]">
  <i :class="icon" v-if="icon"></i>
  <span v-if="$slots.default"><slot></slot></span>
 </button>
</template>
<script>
export default {
 name: 'DtButton',
 props: {
  size: String,
  type: {
   type: String,
   default: 'default'
  },
  nativeType: {
   type: String,
   default: 'button'
  },
  disabled: Boolean,
  round: Boolean,
  plain: Boolean,
  autofocus: Boolean,
  icon: {
   type: String,
   default: ''
  }
 },
 methods: {
  handleClick (event) {
   this.$emit('click', event)
  }
 },
 mounted () {
  this.$emit('click', event)
 }
}
</script>

#css样式，在.vuepressdocs.vuepresspubliccssbutton.css,写法参考饿了么。

#在.studyvuepressdocs.vuepresspubliccssindex.css汇总

@import './iconfont.css';
@import './icon.css';
@import './card.css';
@import './button.css'; //按钮组件
@import './checkbox.css';

#在.vuepressdocs.vuepresscomponentstesttest1.vue文件夹下面调用button

<template>
 <div class="demo-button">
  <div>
   <dt-button>默认按钮</dt-button>
   <dt-button type="primary">主要按钮</dt-button>
   <dt-button type="success">成功按钮</dt-button>
   <dt-button type="info">信息按钮</dt-button>
   <dt-button type="warning">警告按钮</dt-button>
   <dt-button type="danger">危险按钮</dt-button>
  </div>
 </div>
</template>
<script>
import DtButton from '../src/button'
export default {
 name: 'buttonWrap',
 components: {
  DtButton
 }
}
</script>
<style lang="less" scoped>
.demo-button{
 width: 100%;
 text-align: center;
 div {
  margin: 10px 0;
 }
}
</style>

#vuepress会自动根据路径注册组件，我们只要映射文件路径，就可以调用组件。

在.vuepressdocsbaseComponentsbasetest1.md

# 测试案例1								 
 3/4   首页 上一页 1 2 3 4 下一页 尾页