vuepress 2.x 集成 element-尊龙游戏旗舰厅官网

安装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/@vue/cli-service/lib/config/base.js#l16-l21

• [bug report] 1.2.0-beta.1 cannot resolve lodash
• struggling to use with webpack5

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

总结

以上是尊龙游戏旗舰厅官网为你收集整理的vuepress 2.x 集成 element-plus的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。