从零开始学vue3-登录页面实现（1）

项目工具

yarn+vite5+vue3+ts+pinia+element-plus

效果图

版本信息

node v18.18.2
vue 3.4.19
@vue/cli 5.0.8
yarn 1.22.19
vite 5.1.4

项目创建

使用yarn通过vite创建vue3项目。打开cmd，切换到项目目录，开始创建项目

>>> yarn create vite
? Project name: 输入项目名称
? Select a framework: 选择vue
? Select a variant: 选择TypeScript

vscode红色波浪线

1. vscode版本：版本需要高一点，目前vscode1.87.0可解决部分红色波浪线
2. 安装依赖包：运行vscode客户端，打开终端，执行yarn安装依赖包。再关闭vscode客户端，重新打开客户端

安装组件

运行vscode客户端，打开终端，安装组件：vue-router官方路由，pinia状态管理库，element-plus前端框架UI库，sassCSS预处理器，样式库，axios基于Promise的易用、简洁且高效的http库

yarn add vue-router
yarn add pinia
yarn add element-plus
yarn add sass sass-loader
yarn add axios

初始化APP.vue页面

删除原有代码，保留如下

<template>
  <router-view></router-view>
</template>

初始化基础样式表style.css

删除原有代码，保留如下（需要提前下载阿里普惠字体并放入src/assets）

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  outline: none;
  box-sizing: border-box;
}

/* 引入阿里普惠字体 */
@font-face {
  font-family: aliph;
  src: url('./assets/fonts/Alibaba-PuHuiTi-Light.ttf');
}

配置路由信息

创建router文件夹及index.ts文件，路径src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'

const routes = [{
  path: '/',
  name: 'login',
  component: () => import("../views/Login.vue")
},{
  path: '/login',
  redirect: '/'
}]

const router = createRouter({
  history: createWebHistory(),
  routes: routes
})

export default router

main.ts中引入Element Plus和路由信息

导入路由信息，并使用

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

createApp(App)
.use(ElementPlus)
.use(router)
.mount('#app')

登录页面实现

根据路由信息，创建views文件夹和Login.vue文件，路径src/views/Login.vue

<template>
  <div class="login">
    <div class="box">
      <h2>系统登录</h2>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="60px"
      >
        <el-form-item label="账号：" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const ruleForm = reactive({
  username: '',
  password: '',
})

const ruleFormRef = ref<FormInstance>()

const validateUsername = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    callback()
  }
}
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}

const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped lang="scss">
.login {
  width:100vw;
  height:100vh;
  background: linear-gradient(to bottom,#1772b4, #92bdee);
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width:400px;
    border:1px solid #fff;
    padding: 20px;
    h2 {
      color: #fff;
      font-size:20px;
      text-align: center;
      padding: 10px;
      font-family: aliph;
    }
    :deep(.el-form-item__label) {
      color: #fff;
    }
  }
}
</style>

启动运行

未完待续，继续搬砖