vue.js - 如何配置vitepress使我们可以在vitepress中使用element-plus呢？

Question

如何配置vitepress使我们可以在vitepress中使用element-plus呢？

下面是我在.vitepress/config.mjs中的配置

import { defineConfig } from 'vitepress'
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
import ElementPlus from "element-plus"
// import 'element-plus/dist/index.css'  => 报错 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css"

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "工作助手",
  description: "A VitePress Site",
  themeConfig: {
    ...
  },
  vite: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      })
    ]
  },
  vue: {
    setup(app) {
      app.use(ElementPlus)    
    }
  }
})

1. 现在样式不知道该怎么导入
2. 每次使用组件的时候得首先import,自动导入配置没有生效

Answer 1

要在 VitePress 中使用 Element Plus，你需要进行以下配置步骤：

1. 安装依赖：
   首先，确保你已经安装了 VitePress 和 Element Plus。如果还没有安装，可以使用以下命令进行安装：

   npm install vitepress element-plus

2. 配置 VitePress：
   接下来，你需要在 VitePress 的配置文件中（通常是 .vitepress/config.js 或 .vitepress/config.ts）添加 Element Plus 的配置。

   import { defineConfig } from 'vitepress/config'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   
   export default defineConfig({
     // 其他配置项...
     head: [['link', { rel: 'stylesheet', href: 'https://unpkg.com/element-plus/dist/index.css' }]],
     app: {
       headScripts: [
         // 在这里可以添加一些全局的脚本，如果需要的话
       ],
       enhanceApps: ([[app, { router, isServer }]]) => {
         // 安装 Element Plus 插件
         app.use(ElementPlus)
       }
     }
   })

注意：上面的配置中，head 部分用于在 HTML 头部添加 Element Plus 的 CSS 样式。enhanceApps 方法用于在 VitePress 应用初始化时安装 Element Plus 插件。

3. 使用 Element Plus 组件：
   现在，你可以在 VitePress 的 Markdown 文件或 .vue 文件中使用 Element Plus 的组件了。例如，在 Markdown 文件中，你可以通过自定义主题组件来使用 Element Plus 的组件：

   <template>
     <el-button type="primary">Primary Button</el-button>
   </template>
   
   <script setup>
   // 这里可以引入 Element Plus 的组件或其他逻辑
   </script>
   
   <style scoped>
   /* 样式可以写在这里 */
   </style>

4. 运行 VitePress：
   最后，运行 VitePress 以查看配置是否生效：

   npx vitepress dev

或者如果你使用的是 npm 脚本：

npm run dev

按照以上步骤配置后，你应该能够在 VitePress 项目中成功使用 Element Plus 组件。