Scripts2026年4月11日·1 分钟阅读

Element Plus — Vue 3 UI Library by the Element Team

Element Plus is a Vue 3 UI library made by the Element team. 60+ components with desktop-first design, clean aesthetic, TypeScript support, and a huge Chinese developer community. The Vue 3 successor to Element UI.

SC
Script Depot · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

npm i element-plus
// main.ts
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

createApp(App).use(ElementPlus).mount("#app");
<!-- App.vue -->
<template>
  <el-card>
    <el-form :model="form" label-width="80px">
      <el-form-item label="Name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="Level">
        <el-select v-model="form.level">
          <el-option label="Free" value="free" />
          <el-option label="Pro" value="pro" />
        </el-select>
      </el-form-item>
      <el-button type="primary">Submit</el-button>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const form = reactive({ name: "", level: "free" });
</script>
介绍

Element Plus is a Vue 3 UI library made by the Element team at Ele.me (Alibaba). Successor to Element UI (Vue 2). Focused on clean, desktop-first design for admin dashboards and B2B apps. Massive Chinese developer adoption with 80+ components covering most enterprise needs.

What Element Plus Does

  • 80+ components — Button, Input, Select, Table, Form, DatePicker, Tree, Cascader, Upload
  • Desktop-first — polished for large screens, but responsive
  • Dark mode — built-in theme switch
  • i18n — 50+ locales
  • Form engine — reactive form with validation rules
  • Icons — standalone @element-plus/icons-vue package
  • SSR — Nuxt module

Architecture

Built on Vue 3 Composition API. Styles use SCSS with design tokens via CSS custom properties. Runtime theming via CSS variables; components consume tokens.

Self-Hosting

Client library.

Key Features

  • 80+ components
  • Vue 3 + Composition API
  • TypeScript-first
  • Dark mode built in
  • 50+ locales
  • Treeshakable via unplugin-vue-components + element-plus/auto-resolver
  • SSR (Nuxt) ready
  • Responsive layout
  • Form validation engine

Comparison

Library Design Components Target
Element Plus Desktop flat 80+ Admin/B2B
Vuetify Material Design 80+ Apps
Naive UI Flat 80+ Modern UIs
PrimeVue Multi-theme 90+ Apps
Ant Design Vue Enterprise 60+ Admin

常见问题 FAQ

Q: Element UI vs Element Plus？ A: Element UI 是 Vue 2 版本，已停止新功能。Vue 3 项目必须用 Element Plus。API 大部分兼容。

Q: 按需引入？ A: npm i -D unplugin-auto-import unplugin-vue-components，配合 ElementPlusResolver 自动按需导入组件和样式。

Q: 和 Vuetify 选哪个？ A: 中文项目/B2B 后台偏好 Element Plus（国内生态大）；需要 Material Design 美感选 Vuetify。

来源与致谢 Sources

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

Starship — Minimal Blazing-Fast Customizable Shell Prompt

Starship is a minimal, blazing-fast, and infinitely customizable prompt for any shell. Works with bash, zsh, fish, PowerShell, nushell, and more. Single TOML config file and Rust-powered speed with gorgeous defaults.

Script Depot

ripgrep (rg) — Recursively Search Directories with Regex

ripgrep recursively searches directories for a regex pattern while respecting your gitignore. Written in Rust, ripgrep is the fastest search tool on the market — used inside VS Code, GitHub, and many other dev tools.

Script Depot

Oh My Zsh — Delightful Framework for Managing Zsh Configuration

Oh My Zsh is a delightful, community-driven framework for managing your Zsh configuration. 300+ plugins (git, docker, node, python, homebrew), 140+ themes, and auto-update tooling. The de facto starting point for developer terminals.

Script Depot
◈首页🔍搜索👤我的