S16-00 专题-UI-Element Plus

[TOC]

索引

unplugin-vue-components

Components()：({...opt})，是 unplugin-vue-components 插件的一个配置选项，主要用于自动按需导入 Vue 组件。通过这个配置，可以更灵活地控制插件如何自动导入组件。如：自定义组件的目录、启用或禁用类型声明、配置第三方库的支持等。

unplugin-auto-import

AutoImport()：({...opt})，是 unplugin-auto-import 插件的一个配置选项，主要用于自动按需导入常用的 JavaScript、TypeScript 库函数或者模块。它可以帮助你在代码中无需手动导入常用的函数、模块、库等，减少重复的导入语句。

vite-plugin-style-import

createStyleImportPlugin()：({resolves?,libs?})，通过解析你的组件库、样式文件和配置文件来动态导入样式。

基础

Element Plus 是基于 Vue 3，面向设计师和开发者的组件库。

兼容性

浏览器： 支持最近2个浏览器版本

SASS： >1.79.0

安装

包管理器

pnpmyarn

pnpm i element-plus

yarn add element-plus

CDN

jsDelivrunpkg

<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- Import component library -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

项目集成

Vue

自动按需引入@

插件：

unplugin-vue-components：用于自动按需导入 Vue 组件的插件。它的作用是根据你在 Vue 模板中使用的组件，自动检测并导入相应的组件，而不需要手动 import 语句。
unplugin-auto-import：用于自动导入常用 API 和函数的插件。它会自动将你在代码中使用的常见函数（如 Vue 的 ref、reactive，或者其他库的 API）导入，而不需要手动编写 import 语句。

安装：

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

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

~~Vite~~

1、设置vite.config.ts，添加插件AutoImport和Components

更新@2501： vue@3.5.13和element-plus@2.9.2版本中无需再指定dts选项了。

// 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()],
++      dts: 'auto-imports.d.ts' // 重点
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
++      dts: 'components.d.ts' // 重点
+    }),
  ],
})

2、修改tsconfig.app.json，添加"auto-imports.d.ts", "components.d.ts"到include中

json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"], // 重点
  "exclude": ["src/**/__tests__/*", "commitlint.config.js"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

~~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()],
    }),
  ],
}

~~类型提示设置~~

在tsconfig.json 中将安装的2个插件对应的类型声明文件添加到include中

按需引入

也就是在开发中用到某个组件对某个组件进行引入：

vue

<template>
  <div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/main">首页</router-link>
    <router-view></router-view>

    <h2>{{ $store.state.name }}</h2>

    <el-button>默认按钮</el-button>
+    <el-button type="primary">主要按钮</el-button>
+    <el-button type="success">成功按钮</el-button>
+    <el-button type="info">信息按钮</el-button>
+    <el-button type="warning">警告按钮</el-button>
+    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

+ import { ElButton } from 'element-plus'

export default defineComponent({
  name: 'App',
+  components: {
+    ElButton
+  }
})
</script>

<style lang="less">
</style>

但是我们会发现是没有对应的样式的，引入样式有两种方式：

全局引用样式（像之前做的那样）；
局部引用样式（通过babel的插件）；

1.安装babel的插件：

shell

npm install babel-plugin-import -D

2.配置babel.config.js

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }
    ]
  ],
  presets: ['@vue/cli-plugin-babel/preset']
}

但是这里依然有个弊端：

这些组件我们在多个页面或者组件中使用的时候，都需要导入并且在components中进行注册；
所以我们可以将它们在全局注册一次；

import {
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge,
} from 'element-plus'

+ const app = createApp(App)

const components = [
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge
]

+ for (const cpn of components) {
+  app.component(cpn.name, cpn)
+ }

完整引入

一种引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册：

import { createApp } from 'vue'
+ import ElementPlus from 'element-plus'
+ import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

+ app.use(ElementPlus)
app.mount('#app')

~~volar支持~~

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

json

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

导入icon@

Vue

1、安装图标：npm install @element-plus/icons-vue

2、全局注册图标：

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

3、封装： 对上面的方法进行封装

使用

import registerIcons from './global/registerIcons'
const app = createApp(App)
+ app.use(registerIcons)

封装

// 注册element-plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

function registerIcons(app: App<Element>) {
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
}

export default registerIcons

4、在label插槽中添加图标

html

    <!-- 登录表单 -->
    <el-tabs v-model="activeName" class="tabs" type="border-card" stretch>
      <el-tab-pane label="帐号登录" name="account">
+        <template #label>
          <div class="label">
+            <el-icon><UserFilled /></el-icon>
+            <span class="text">帐号登录</span>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="手机登录" name="phonse">
+        <template #label>
          <div class="label">
+            <el-icon><Iphone /></el-icon>
+            <span class="text">手机登录</span>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>

自动导入样式@

ElMessage等组件无法自动引入，只能手动引入，但是引入后样式也需要另外引入

方法一：在main.ts中手动引入样式

方法二：使用插件 vite-plugin-style-import

国际化@

~~方法一：~~ 全局引入

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})

~~方式二：~~ 自动按需引入(推荐)

html

<template>
  <div class="app">
+    <el-config-provider :locale="zhCn">
      <RouterView />
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
+  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>

添加.mjs文件声明

declare module '*.mjs'

效果：

TypeScript【

API

unplugin-vue-components

unplugin-vue-components：用于自动按需导入 Vue 组件的插件。它的作用是根据你在 Vue 模板中使用的组件，自动检测并导入相应的组件，而不需要手动 import 语句。

应用：

自动按需引入Element Plus
自动按需引入xxx【

Components()

Components()：({...opt})，是 unplugin-vue-components 插件的一个配置选项，主要用于自动按需导入 Vue 组件。通过这个配置，可以更灵活地控制插件如何自动导入组件。如：自定义组件的目录、启用或禁用类型声明、配置第三方库的支持等。

opt
resolvers?：Function[]，默认：[]，自定义组件库的自动导入解析器。如Element Plus的解析器ElementPlusResolver()。
dts?：boolean | string，默认：false，是否生成 TS 类型声明文件。为true插件会在项目根目录生成 components.d.ts 文件。
dirs?：string[]，默认：['src/components']，指定要搜索的组件目录。可以传递多个目录路径。
include?：RegExp[] | string[]，默认：[]，指定要包含的文件或文件夹的正则表达式。
exclude?：RegExp[] | string[]，默认：[]，指定要排除的文件或文件夹的正则表达式。
extensions：string[]，默认['vue']，指定组件文件的扩展名。
deep：boolean，默认：true，是否递归子目录。

// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

unplugin-auto-import

unplugin-auto-import: 用于自动导入常用 API 和函数的插件。它会自动将你在代码中使用的常见函数（如 Vue 的 ref、reactive，或者其他库的 API）导入，而不需要手动编写 import 语句。

应用：

自动按需引入Element Plus
自动按需引入xxx【

AutoImport()

AutoImport()：({...opt})，是 unplugin-auto-import 插件的一个配置选项，主要用于自动按需导入常用的 JavaScript、TypeScript 库函数或者模块。它可以帮助你在代码中无需手动导入常用的函数、模块、库等，减少重复的导入语句。

opt
resolvers?：Function[]，默认：[]，自定义组件库的自动导入解析器。如Element Plus的解析器ElementPlusResolver()。
dts?：boolean | string，默认：false，是否生成 TS 类型声明文件。为true插件会在项目根目录生成 auto-imports.d.ts 文件。
dirs?：string[]，默认：['src/components']，指定要搜索的组件目录。可以传递多个目录路径。
include?：RegExp[] | string[]，默认：[]，指定要包含的文件或文件夹的正则表达式。
exclude?：RegExp[] | string[]，默认：[]，指定要排除的文件或文件夹的正则表达式。
imports?：string[] | Record<string, string>[]，默认：[]，指定要自动导入的模块或函数。
vueTemplate：boolean，默认：true，是否在 Vue 模板中启用自动导入。

// 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()],
    }),
  ],
})

vite-plugin-style-import

插件：

vite-plugin-style-import：用于在Vite项目中按需加载样式的插件。可用于ElementPlus、AndDesignVue、Antd、Vant、Nutui库。
consola：

安装：

pnpm i vite-plugin-style-import -D
pnpm i consola -D

配置：

在vite.config.ts 中配置。

import { UserConfigExport } from 'vite'
import {
  createStyleImportPlugin,
  AndDesignVueResolve,
  VantResolve,
  ElementPlusResolve,
  NutuiResolve,
  AntdResolve,
} from 'vite-plugin-style-import'

export default (): UserConfigExport => {
  return {
    // 1. If you are using the ant-design series, you need to configure this
    // 2. Make sure less is installed in the dependency `yarn add less -D`
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },
    plugins: [
      createStyleImportPlugin({
        resolves: [
          AndDesignVueResolve(),
          VantResolve(),
          ElementPlusResolve(),
          NutuiResolve(),
          AntdResolve(),
        ],
        libs: [
          // If you don’t have the resolve you need, you can write it directly in the lib, or you can provide us with PR
          {
            libraryName: 'ant-design-vue',
            esModule: true,
            resolveStyle: (name) => {
              return `ant-design-vue/es/${name}/style/index`
            },
          },
        ],
      }),
    ],
  }
}

Element Plus配置：

import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'

export default ({ mode }: any) => {
  return defineConfig({
    plugins: [
      // 按需导入 element-plus 样式
      createStyleImportPlugin({
        resolves: [ElementPlusResolve()],
        libs: [
          {
            libraryName: 'element-plus',
            esModule: true,
            resolveStyle: (name: string) => {
              return `element-plus/theme-chalk/${name}.css`
            }
          }
        ]
      })
    ],
  })
}

createStyleImportPlugin()

createStyleImportPlugin()：({resolves?,libs?})，通过解析你的组件库、样式文件和配置文件来动态导入样式。

resolves?：Lib[]，用于导入插件内置的库。如ElementPlusResolve()。
libs?：Lib[]，指定需要按需加载的库。每个库可以指定其导入路径以及样式的加载方式。
- libraryName?：string，库的名称，如element-plus
- esModule?：boolean，true：生成的导入语句是 ES Module 风格的。false：使用 require 语法。
- resolveStyle?：(cpnName)=>string，解析样式文件路径，通常是通过组件名动态计算样式路径。
返回：
plugin：Plugin，返回一个插件对象，这个对象可以直接应用于构建工具的配置中。

S16-00 专题-UI-Element Plus ​

索引 ​

基础 ​

兼容性 ​

安装 ​

包管理器 ​

CDN ​

项目集成 ​

Vue ​

自动按需引入@ ​

按需引入 ​

完整引入 ​

导入icon@ ​

Vue ​

自动导入样式@ ​

国际化@ ​

TypeScript【 ​

API ​

unplugin-vue-components ​

Components() ​

unplugin-auto-import ​

AutoImport() ​

vite-plugin-style-import ​

createStyleImportPlugin() ​

element-plus【 ​

Basic ​

Button@ ​

Icon@ ​

Layout ​

Link@ ​

其他 ​

Form ​

Cascader@ ​

Checkbox@ ​

Color Picker ​

DatePicker ​

DateTime Picker ​

Form@ ​

Input@ ​

Radio ​

Select@ ​

Rate ​

Slider ​

Switch ​

TreeSelect ​

Upload@ ​

其他 ​

Data ​

Avatar ​

Badge ​

Calendar ​

Card@ ​

Carousel@ ​

Collapse ​

Image@ ​

Pagination@ ​

Progress ​

Skeleton ​

Table@ ​

Tag@ ​

Timeline ​

Tree ​

其他 ​

Navigation ​

Backtop ​

Breadcrumb@ ​

Dropdown@ ​

Menu@ ​

Steps ​

Tabs@ ​

其他 ​

Feedback ​

Alert ​

Dialog@ ​

Drawer ​

Loading@ ​

Message ​

Message Box ​

Notification ​

Popover ​

S16-00 专题-UI-Element Plus

索引

基础

兼容性

安装

包管理器

CDN

项目集成

Vue

自动按需引入@

按需引入

完整引入

导入icon@

Vue

自动导入样式@

国际化@

TypeScript【

API

unplugin-vue-components

Components()

unplugin-auto-import

AutoImport()

vite-plugin-style-import

createStyleImportPlugin()

element-plus【

Basic

Button@

Icon@

Layout

Link@

其他

Form

Cascader@

Checkbox@

Color Picker

DatePicker

DateTime Picker

Form@

Input@

Radio

Select@

Rate

Slider

Switch

TreeSelect

Upload@

其他

Data

Avatar

Badge

Calendar

Card@

Carousel@

Collapse

Image@

Pagination@

Progress

Skeleton

Table@

Tag@

Timeline

Tree

其他

Navigation

Backtop

Breadcrumb@

Dropdown@

Menu@

Steps

Tabs@

其他

Feedback

Alert

Dialog@

Drawer

Loading@

Message

Message Box

Notification

Popover