vuepress 2.x 集成 element-plus

19 min read

要将 VuePress 2.x 集成 Element Plus，可以按照以下步骤进行操作：

  1. 首先，在你的 VuePress 2.x 项目中安装 Element Plus：
npm install element-plus
  1. 在你的 VuePress 2.x 项目的 .vuepress/config.js 文件中，添加全局样式和脚本的引入：
module.exports = {
  // 其他配置项...
  head: [
    // 引入 Element Plus 样式
    ['link', { rel: 'stylesheet', href: 'https://unpkg.com/element-plus/lib/theme-chalk/index.css' }],
  ],
  // 引入 Element Plus 脚本
  enhancesAppFiles: [
    // Element Plus 核心脚本
    'path/to/element-plus.js',
  ],
}
  1. 在根目录下创建 element-plus.js 文件，并在其中引入 Element Plus 组件和样式：
// path/to/element-plus.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default ({ app }) => {
  app.use(ElementPlus)
}
  1. 最后，在你的 VuePress 2.x 项目中可以直接使用 Element Plus 的组件了。

注意：确保你的 VuePress 版本为 2.x，且按照上述步骤正确配置后，即可实现 VuePress 2.x 集成 Element Plus。