vuepress 2.x 集成 element-plus_vuepress2集成element plus

作者：小丑西瓜9 | 2024-03-12 20:40:56

踩

vuepress2集成element plus

安装element-plus

进入vuepress根目录，执行命令

npm install element-plus
1

修改 clientAppEnhance.js

接下来需要修改用于客户端应用增强的docs/.vuepress/clientAppEnhance.js文件
vuepress的目录结构如下：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── clientAppEnhance.js (可选的)   <-- 修改这个文件
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

修改后文件如下：

import * as Icons from '@element-plus/icons-vue'
import { defineClientAppEnhance } from '@vuepress/client'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'

export default defineClientAppEnhance(({ app }) => {
  app.use(ElementPlus)
  // icon
  for (const icon in Icons) {
    // eslint-disable-next-line import/namespace
    app.component('ElIcon' + icon, Icons[icon])
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

chainWebpack配置
参考：https://v2.vuepress.vuejs.org/reference/bundler/webpack.html#chainwebpack

chainWebpack = (config, isServer, isBuild) => {
        config.resolve.extensions.add('.mjs')

        // https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
        config.module
          .rule('esm')
          .test(/\.m?jsx?$/)
          .resolve.set('fullySpecified', false)
          .end()
          .type('javascript/auto')
      }
1
2
3
4
5
6
7
8
9
10
11

vite配置

  if (app.env.isDev && app.options.bundler.endsWith('vite')) {
    // eslint-disable-next-line import/no-extraneous-dependencies
    app.options.bundlerConfig.viteOptions = require('vite').mergeConfig(
      app.options.bundlerConfig.viteOptions,
      {
        optimizeDeps: {
          include: ['lodash'],
        },
      }
    )
  }
1
2
3
4
5
6
7
8
9
10
11

使用

接下来就可以像往常一样食用element的组件了

<el-button type="success">按钮</el-button>
1

NPM

Install

npm i -D @starzkg/vuepress-plugin-element-plus
1

或

yarn add -D @starzkg/vuepress-plugin-element-plus
1

参考源码

https://github.com/vuejs/vue-cli/blob/next/packages/%40vue/cli-service/lib/config/base.js#L16-L21

Issue

参考文章

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/225738