初始化添加登录页面

package-lock.json

@@ -8,6 +8,7 @@
       "name": "cms",
       "version": "0.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
         "element-plus": "^2.7.7",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.1",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.7.7",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",

src/views/admin/login.vue

@@ -1,34 +1,54 @@
 <script setup>
 import '@/assets/admin/css/login.css' //导入样式
-import { reactive } from 'vue'
+import {reactive, ref} from 'vue'
   import { User,Lock } from '@element-plus/icons-vue' //图标
 
   const data = reactive({
     name: '',
     password: '',
   })
+
+
+  //校验规则
+  const rules = {
+  name: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 2,max: 10, message: '用户名长度限制 [2 - 10]个字符', trigger: 'blur' }
+  ],
+    password: [
+      {required: true, message: '请输入密码', trigger: 'blur' }
+    ]
+  }
+
+  const elFormRef = ref()  //存储 <el-form>组件实例的引用
+
   const login = () => {
     console.log(data)
+
+
+    elFormRef.value.validate((valid, fields) => {
+      console.log(valid, fields)
+    })
   }
 
 </script>
 <template>
   <div class="dr-login">
-    <el-form :model='data'>
+    <el-form :model='data' :rules='rules'>
       <div class="title">
         DR_CMS
       </div>
 
-      <el-form-item>
+      <el-form-item prop="name">
         <el-input :prefix-icon="User" v-model="data.name" />
       </el-form-item>
 
-      <el-form-item>
+      <el-form-item prop="password">
         <el-input :prefix-icon="Lock" show-password v-model="data.password" />
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="login">登录</el-button>
+        <el-button type="primary" @click="login" ref="elFormRef">登录</el-button>
       </el-form-item>
 
     </el-form>