Element Plus 的初始配置

官方文档地址

概述

基本思路:

1. 使用 vite 工具来创建 vue 项目, 清理模板中的代码与样式 (使用模板安装更为简单).
2. 安装 element-plus.
3. 安装按需引入的插件, 配置 vite.config.js 或 vite.config.ts 文件.
4. 安装 dayjs, sass (可选).
5. 配置国际化 (可选).

需要注意, 按需引入分两种情况:

1. 手动导入. 在代码中需要使用组件的时候, import { Elxxx } from 'element-plus', CSS 会因配置而慈东导入.
2. 自动导入. 代码中直接使用组件 (Elxxx 或 el-xxx), 不需要引入, 在构建项目的时候会根据引用自动导入需要的组件与样式.

详细步骤

使用模板安装 vue

npm create vue@latest

该模板会根据步骤安装需要的组件与插件. 比如启用 ts, 安装 router, pinia 等. 推荐使用. 也可以使用 vite 的模板:

npm create vite@latest

该模板会进入向导, 向导中会选择语言框架 (vue 还是 react, 或其他). 这个模板更简洁, 需要的组件需要自己安装.

安装 element-plus

npm i element-plus -S

配置手动导入

• 安装 unplugin-element-plus
• 配置 vite.config.ts

npm i unplugin-element-plus -D

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus({ ... })],
})

ElementPlus({ ... }) 的配置细节可以参考文档. 默认不传参即可, 传入空对象 {}.

使用的时候, 先导入组件, 再使用组件.

配置自动导入

• 安装两个模块: unplugin-vue-components 和 unplugin-auto-import.
• 配置 vite.config.ts

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

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

使用的时候, 不用导入组件, 直接在页面中使用即可.

国际化配置

推荐优先在 App.vue 文件对整个组件配置国际化:

1. 引入 ElConfigProvider 容器组件.
2. 引入语言包 (默认使用英文).
3. 引用 dayjs 中的时区设置.

<template>
  <el-config-provider :locale="zhCn">
    <根组件 />
  </el-config-provider>
</template>

<script setup lang="ts">
import 'dayjs/locale/zh-cn' // 可以置于 main.ts 中
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>

import 'dayjs/locale/zh-cn' 可以放在 main.ts 中.