非你网

安装 element-plus

https://element-plus.org/zh-CN/guide/installation.html

pnpm install element-plus

配置按需引入

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

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

然后，暂时完整的 vite.config.ts 长这样的。

import { fileURLToPath, URL } from 'node:url'
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'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

这样就好。然后去试试。

在 HomeView.vue 中加入一个按钮，看看效果。

<el-button>Default</el-button>

发现页面上出现了一个 element 的一个默认按钮。证明自动导入有效果了。

配置日期时间国际化

大多时候，就是中国人自己的后台，配置好简体中文就好了。

在配置之前，先在 HomeView.vue 中加入一个日期组件。然后看看日期组件中语言版本。

<el-date-picker type="date" placeholder="Pick a day" />

当日期渲染出来，点击展开日期后，发现里边是英文的日期组件。好，那现在试试多语言的日期配置。

在 App.vue 中，加一个 el-config-provider 的容器，设置 local 为 zhCn。zhCn 通过下边的语句引入。

<el-config-provider :locale="zhCn"></el-config-provider>

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

这里配置好简体中文就好。就不想要其他语言。

然后再次点击日期组件，看看已经是中文的了。

这里是全局配置的。当然，你也可以在使用组件时候页面单独配置也是可以的。

这个时候，发现 vscode 警告 无法找到模块“element-plus/dist/locale/zh-cn.mjs”的声明文件。 这个，时候我们定义一下 types 就好。暂时先直接在 env.d.ts 中加入以下配置。

declare module 'element-plus/dist/locale/zh-cn.mjs'

这个时候，警告就没了。

在这里还可以配置按钮中文之间加空格，默认组件大小，弹窗消息等。这里再配置一个默认组件大小就可以了。默认组件默认值是 default。现在想设置成 small。这样设置就可以了。

<el-config-provider size="small" :locale="zhCn"></el-config-provider>

提交版本

git add .
git commit -m '安装 element-plus，配置自动导入以及组件国际化和默认组件大小'