element-plus

form

下面案例演示功能：

1. form 表单域绑定响应式对象属性的方法
2. 表单验证规则绑定到表单，通过属性 rules
3. 通过表单 ref 手动调用表单验证方法，以及通过传递表单 ref 作为参数调用表单验证的方法

<el-form :model="form" :rules="rules" ref="formRef" style="width: 100%;" label-width="70px">
    <el-form-item prop="username" label="工号：">
        <el-input style="width:100%" placeholder="请输入工号" v-model="form.username" />
            </el-form-item>
<el-form-item label="姓名：">
    <el-input disabled v-model="form.fullname" />
        </el-form-item>
<el-form-item prop="password" label="密码：">
    <el-input placeholder="请输入密码" v-model="form.password" />
        </el-form-item>
<el-form-item>
        <el-button type="primary" style="width:100%" @click="login(formRef)">登录</el-button>
</el-form-item>
</el-form>

<script setup>
import { reactive,ref } from 'vue'
const form = reactive({
  username: '',
  fullname: '',
  password: '',
})

const rules = {
  username: [
    {required: true, trigger: 'blur', message: '必须填写工号'},
  ],
  password: [
    {required: true, trigger: 'blur', message: '必须填写密码'},
  ]
}

// const login = async formRef => {
//   const res = await formRef.validate((valid,fields) => {
//     if(valid) console.log('表单验证成功')
//     else console.log('表单验证失败：', fields)
//   })
//   console.log('表单验证的结果：', res)
// }
const login = async () => {
  const res = await formRef.value.validate((valid,fields) => {
    if(valid) console.log('表单验证成功')
    else console.log('表单验证失败：', fields)
  })
  console.log('表单验证的结果：', res)
}
</script>

el-image

引用项目本地图片文件

<el-image style="width: 80%; height: 90%" src="src/assets/img/mult.png" fit="contain" />

设置背景图片，在标签中使用下面的类

.half-left {
  padding-left: 50px;
  height: 100%;
  background: url('@/assets/img/mult.png') no-repeat 60% center / cover;
}

安装

# 安装UI组件库
pnpm add element-plus

# 安装按需引入用到的插件
pnpm add -D unplugin-vue-components unplugin-auto-import

在配置文件 vite.config.js 中新增下图中的红框的两部分代码，应用插件

完成上面步骤后在业务组件 template 中直接使用 element-plus 组件，不需要在 <script> 中通过 import 导入。还有个附赠的功能是在项目 /component 下创建的自定义组件类似 element-plus ，也不需要声明可直接在 template 中使用。

在 template 中直接使用 element-plus 组件时不需要在script 中通过 import 导入组件， vscode 也不会报语法错误 在 script 中使用 ElMessage 时 vscode 会自动添加一行导入该组件，需要手动删除该行导入用代码，否则前端页面运行会出错（没有样式） 去掉导入的代码后可正常运行，但是会在使用 ElMessage 的行上报红线，此时需要在 eslint.config.js 中忽略此类错误，看下面代码的 ElMessage 行

import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfig([
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ElMessage: 'readonly',
      },
    },
  },

  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  skipFormatting,

])

导入项目

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

console.log('环境变量：', import.meta.env)
const app = createApp(App)
app.use(router).use(ElementPlus).mount('#app')

安装图标

pnpm i @element-plus/icons-vue