记录--vue3 + vite + element-plus遇到的问题（不定期更新）

element-plus

element-plus中图标是需要单独引入的：

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

然后在自己需要用到的地方单独引入如：

// 引入
import { User, Key } from "@element-plus/icons-vue";
// 调用
...
<el-icon><component :is="User" /></el-icon>
...

至于为什么不用全局引入我按照网上的方法试用无效，具体原因不清楚

表单以及表单验证：

参数以及表单验证都需要放在reactive中，否则验证无效输入也会出问题，比如：

const loginForm = reactive({
  username: "",
  password: "",
});
const rules = reactive({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

Element Plus 组件默认使用英语，使用中文需要引入Element Plus国际化的中文包，然后在设置（这里的引入是在main.ts全局引入）：

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
...
app.use(ElementPlus, {
  locale: zhCn,
})
...