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

使用VuePress搭建一个类型element ui文档可以分为以下几个步骤：

1. 安装VuePress

使用VuePress需要先安装Node.js和npm，在命令行中输入以下命令进行安装：

npm install -g vuepress

2. 初始化项目

在命令行中进入本地的一个空文件夹，输入以下命令进行项目的初始化：

npm init -y

接着，在该文件夹下创建一个docs文件夹，并在docs文件夹下创建一个README.md文件。

3. 配置VuePress

在项目根目录下创建一个名为.vuepress的文件夹，里面创建一个config.js文件，该文件用于配置VuePress。在config.js文件中输入以下内容：

module.exports = {
  title: '文档标题',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'About', link: '/about/' }
    ],
    sidebar: [
      '/',
      '/guide/',
      '/about/'
    ]
  }
}

在该配置中，title表示文档的标题，nav表示文档的导航栏，sidebar表示文档的侧边栏。

4. 编写文档

在docs文件夹下编写文档，可以使用markdown语法。可以在docs文件夹下创建一个guide文件夹，然后在该文件夹下创建一个README.md文件，用于编写文档内容。

5. 运行VuePress

在命令行中输入以下命令运行VuePress，开始搭建文档网站：

vuepress dev docs

6. 打包上线

在命令行中输入以下命令进行打包：

vuepress build docs

然后将产生的dist文件夹部署到服务器即可。

示例1：

在VuePress中使用element-ui组件可以通过如下方式进行：

1. 安装element-ui

npm i element-ui -S

1. 在docs/theme/index.js中引入element-ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default {
  ...,
  mounted() {
    Vue.use(ElementUI, {
      size: 'medium'
    })
  },
  ...
}

1. 在markdown文档中使用element-ui组件

:::tip
这是一个提示
:::

:::warning
这是一个警告
:::

:::danger
这是一个危险
:::

示例2：

在VuePress中使用highlight.js进行代码高亮可以通过如下方式进行：

1. 安装highlight.js

npm i highlight.js -S

1. 在docs/theme/index.js中引入highlight.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

export default {
  ...,
  mounted() {
    Vue.use(ElementUI, {
      size: 'medium'
    })
    Vue.directive('highlight',function(el){
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
            hljs.highlightBlock(block)
        })
    })
  },
  ...
}

1. 在markdown文档中使用highlight.js进行代码高亮

```javascript
let a = 1
console.log(a)

```

这些就是使用VuePress搭建一个类型element ui文档的完整攻略。