Vue 3 + Vite 项目中按需引入 Element Plus (JavaScript)

1. 安装必要依赖
bash 复制代码
npm install element-plus
npm install -D unplugin-vue-components unplugin-auto-import
2. 配置 vite.config.js
js 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})
3. 可选样式配置
3.1 完整引入样式 (推荐)

在 main.js 中:

js 复制代码
import 'element-plus/dist/index.css'
3.2 按需引入样式 (需要额外安装插件)
bash 复制代码
npm install -D vite-plugin-style-import

然后在 vite.config.js 中添加:

js 复制代码
import { createStyleImportPlugin } from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    // ...其他插件
    createStyleImportPlugin({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/es/components/${name.substring(3)}/style/css`
          },
        },
      ],
    }),
  ],
})
4. 使用组件

现在你可以直接在模板中使用 Element Plus 组件,无需手动导入:

vue 复制代码
<template>
  <el-button type="primary">按钮</el-button>
  <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>
5. 自定义主题 (可选)

在 vite.config.js 中添加:

js 复制代码
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "element-plus/theme-chalk/src/index" as *;`,
      },
    },
  },
})

然后创建 variables.scss 文件定义变量:

css 复制代码
$--color-primary: #409EFF;
注意事项
  1. 确保你的 Vue 版本是 3.x
  2. 确保 Vite 版本是 2.x 或更高
  3. 按需引入只适用于模板中使用的组件
  4. 如果需要在 JS 中使用 ElMessage 等非组件 API,仍需手动导入:
js 复制代码
import { ElMessage } from 'element-plus'

ElMessage.success('操作成功')
相关推荐
Moment几秒前
为什么 Electron 项目推荐使用 Monorepo 架构 🚀🚀🚀
前端·javascript·github
掘金安东尼5 分钟前
🧭前端周刊第437期(2025年10月20日–10月26日)
前端·javascript·github
浩男孩10 分钟前
🍀【总结】使用 TS 封装几条开发过程中常使用的工具函数
前端
Mintopia16 分钟前
🧠 AIGC + 区块链:Web内容确权与溯源的技术融合探索
前端·javascript·全栈
晓得迷路了20 分钟前
栗子前端技术周刊第 103 期 - Vitest 4.0、Next.js 16、Vue Router 4.6...
前端·javascript·vue.js
Mintopia21 分钟前
🚀 Next.js Edge Runtime 实践学习指南 —— 从零到边缘的奇幻旅行
前端·后端·全栈
GISer_Jing26 分钟前
不定高虚拟列表性能优化全解析
前端·javascript·性能优化
Predestination王瀞潞41 分钟前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
鹏多多1 小时前
深度解析React中useEffect钩子的使用
前端·javascript·react.js
超级大只老咪1 小时前
CSS基础语法
前端