Element-Plus 入门指南

简述

Element-Plus 是一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

Element-Plus 在 Element UI 的基础上进行了升级和优化，提供了更加丰富和强大的组件库。它基于 Vue 3.0 构建，并使用了 TypeScript 进行编写，为开发者提供了类型提示和代码补全等增强功能。Element-Plus 的组件设计简洁明了，易于使用，同时提供了丰富的 API 和插槽，方便开发者进行定制和扩展。

主要特点

• 丰富的组件库：Element-Plus 提供了多种常用的布局组件和 UI 组件，如容器、栅格布局、卡片、面板、表格、表单、按钮、导航、通知等。这些组件可以帮助开发者快速构建出结构清晰、易于维护的页面布局。
• 高度的可定制性：Element-Plus 允许开发者通过修改样式、属性、事件等方式对组件进行定制。此外，它还提供了主题定制功能，可以根据需要更换组件的样式。
• 良好的性能表现：Element-Plus 通过优化组件代码和压缩图片等方式，提高了 Web 应用的加载速度和运行效率。
• 详细的文档和教程：Element-Plus 提供了详细的文档和教程，帮助开发者更好地掌握和使用该组件库。

兼容性

• Element Plus 支持最近两个版本的浏览器。

• 如果需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。

• 由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。

  版本	Chrome	Edge	Firefox	Safari
  < 2.5.0	Chrome ≥ 64	Edge ≥ 79	Firefox ≥ 78	Safari ≥ 12
  2.5.0 +	Chrome ≥ 85	Edge ≥ 85	Firefox ≥ 79	Safari ≥ 14.1

安装并引入 Element-Plus

• 安装

  npm install element-plus --save
  

• 按需导入（官方推荐）

  自动导入首先需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件

  npm install -D unplugin-vue-components unplugin-auto-import
  

  然后把下列代码插入到 Vite 或 Webpack 的配置文件中：

  Vite

  // vite.config.ts
  import { defineConfig } from 'vite'
  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: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  })
  

  Webpack

  // webpack.config.js
  const AutoImport = require('unplugin-auto-import/webpack')
  const Components = require('unplugin-vue-components/webpack')
  const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  
  module.exports = {
    // ...
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
  

• 手动导入

  Element Plus 提供了基于 ES Module 开箱即用的 Tree Shaking 功能。

  但是需要安装 unplugin-element-plus 来导入样式。

  vite.config.ts

  // vite.config.ts
  import { defineConfig } from 'vite'
  import ElementPlus from 'unplugin-element-plus/vite'
  
  export default defineConfig({
    // ...
    plugins: [ElementPlus()],
  })
  

• 完整引入

  如果对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

  在 main.js 中写入引入代码：

  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  
  const app = createApp(App)
  
  app.use(ElementPlus)
  app.mount('#app')
  
  

简单案例

打开 Element-Plus 的官网

这里以 Button 按钮为例：

• Button 按钮组件

• 复制案例代码粘贴到 Home.vue 文件 看演示效果

  Button 组件实例代码

  <template>
    <div class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
  </template>
  <script setup></script>
  <style scoped></style>
  

• 浏览器显示效果如下：

  

• 其他组件使用方式类似，需要什么类型的组件就从官网 copy 代码进行修改即可使用