vuepress 2.x 集成 element-plus
卞琨
安装element-plus
进入vuepress根目录，执行命令
npm install element-plus
修改 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
修改后文件如下：
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])
}
})
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')
}
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'],
},
}
)
}
使用
接下来就可以像往常一样食用element的组件了
<el-button type="success">按钮</el-button>
NPM
Install
npm i -D @starzkg/vuepress-plugin-element-plus
或
yarn add -D @starzkg/vuepress-plugin-element-plus
参考源码
- https://github.com/vuejs/vue-cli/blob/next/packages/%40vue/cli-service/lib/config/base.js#L16-L21
Issue
参考文章
类似资料：