搭建博客 by 豆姆

Vuepress框架基于Vue，自然也可以使用Vue。试着添加一些 Element UI 组件

按钮：

输入框：

# 环境配置

# Element UI

先安装 Element UI 组件库

npm install -D element-ui
# yarn add -D element-ui

1
2

# enhanceApp.js

找到docs/.vuepress/enhanceApp.js文件，添加如下内容

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

export default ({
    Vue, // VuePress 正在使用的 Vue 构造函数
  }) => {
    Vue.use(ElementUI)
    // ...做一些其他的应用级别的优化
  }

1
2
3
4
5
6
7
8
9

试着运行一下，如果提示了core-js的版本问题，可以参考issue #2275 (opens new window)，安装

npm install -D async-validator@1.11.5
# yarn add -D async-validator@1.11.5

1
2

# 使用方法

# 直接使用

在.md文件中直接使用

<el-button type="primary" style="width:98px" >按钮</el-button>

# 注册为全局组件

按官方文档所示，所有在.vuepress/components中找到的*.vue文件将会自动地被注册为全局的异步组件。

例如，将Test.vue放在.vuepress/components路径下，然后在.md文件中调用

<Test/>

TIP

同样，在.md文件中也可以写<script>、<style>、YAML front matter，frontmatter可以用$page.frontmatter.XXX获取到。