logo
努力加载中 ……

集成Element PLus

Starzkg3721.24

集成Element PLus

安装element-plus

进入vuepress根目录,执行命令

npm install element-plus

修改 enhanceApp.js

接下来需要修改用于客户端应用增强的docs/.vuepress/enhanceApp.js文件

vuepress的目录结构如下:

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.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

参考文章