安装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)// iconfor (const icon in Icons) {// eslint-disable-next-line import/namespaceapp.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-691873586config.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-dependenciesapp.options.bundlerConfig.viteOptions = require('vite').mergeConfig(app.options.bundlerConfig.viteOptions,{optimizeDeps: {include: ['lodash'],},})}

使用

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

按钮

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

• [Bug Report] 1.2.0-beta.1 cannot resolve lodash
• Struggling to use with WebPack5

参考文章

• vuepress集成element-ui
• webpack打包导入的文件时候省略后缀名设置
• npm:webpack-chain

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！