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('操作成功')
相关推荐
Demoncode_y5 分钟前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
杨超越luckly7 分钟前
HTML应用指南:利用POST请求获取全国中国工商农业银行网点位置信息
大数据·前端·html·数据可视化·银行网点
皮蛋瘦肉粥_12125 分钟前
pink老师html5+css3day02
前端·css3·html5
qianmo202131 分钟前
基于pycharm实现html文件的快速实现问题讨论
前端·html
IT_陈寒32 分钟前
SpringBoot3踩坑实录:一个@Async注解让我多扛了5000QPS
前端·人工智能·后端
kura_tsuki36 分钟前
[Web网页] 零基础入门 HTML
前端·html
岁月宁静1 小时前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
golang学习记1 小时前
从0死磕全栈之Next.js Server Actions 入门实战:在服务端安全执行逻辑,告别 API 路由!
前端
光影少年1 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划
这儿有一堆花1 小时前
三种 弹出广告 代码开发实战
前端·html