从零开始的 Vuepress2.X (三)
（三）使用 Element-Plus 组件库
目录
前言
vuepress支持vue语句，那怎么少的了vue的组件库呢
下面我们就引入 Element Plus 来丰富我们的博客
1、使用 Element Plus
1.1 安装 Element Plus
pnpm install element-plus
yarn add element-plus
npm install element-plus --save
1.2 引入 Element Plus
在 client 中引入
// .vuepress/client.ts
import { defineClientConfig } from '@vuepress/client'// 导入组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
const icons = ElementPlusIconsVue as any;
export default defineClientConfig ({
enhance({ app }){
// 引入element图标
Object.keys(icons).forEach(key => {
app.component(key, icons[key])
})
// 挂载 element plus
app.use(ElementPlus)
},
...
})
之后我们就可以直接使用了
---
title: test2
date: 2023/3/1
tags:
- css
categories:
- 测试组件
---
<el-button>我是按钮</el-button>
