一、vue 项目搭建

1、创建 vue 项目

vue create vue-element

说明：创建过程中可以选择路由，也可也可以不选择，可以通过 npm install 安装

vue 项目目录结构

说明：api 为自己创建的文件夹，router 选择路由模块会自动创建

router下的index.js文件（配置路由的文件）

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

const routes = [
  {
   
    path: '/', //路由路径
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '@/views/login.vue')//访问的页面
  },
]
// 创建路由
const router = createRouter({
   
  history: createWebHashHistory(),
  routes
})
// 导出路由
export default router

views下的 login.vue

<template>
  <div class="content">
    <div class="login">
      <span class="font">智慧车库管理</span>
      <div>
        账 号：<el-input
          v-model="user.account"
          style="width: 240px"
          placeholder="请输入账号"
        />
      </div>
      <div style="margin-top: 20px">
        密 码：<el-input
          v-model="user.password"
          style="width: 240px"
          placeholder="请输入密码"
          type="password"
          show-password
        />
      </div>

      <div class="register">
        <div>
          <span>注册账号</span>
        </div>
        <div>
          <span>验证码登录</span>
        </div>
      </div>

      <div @click="login">
        <el-button type="success" round size="large" class="loginbut">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
    reactive , getCurrentInstance} from "vue";

const user = reactive({
    account: "", password: "" });

const {
   proxy} = getCurrentInstance()

const login = async() => {
   
  console.log