二、0-1搭建springboot+vue3前后端分离-登录页面

项目仓库地址：zgw-admin: 从0-1搭建一个springboot+vue3的项目，这是源码

本次主要是为了：

a.写登录页面

b.element plus组件是否能正常使用

c.页面调用ts是否正常，无参和有参的函数

首页的图片：

页面效果

1、引入element plus组件，参考文档：
Element Plus 在Vue3项目中引入的三种方法_vue3引入elementplus组件-CSDN博客

npm install element-plus --save

2、安装完毕之后在main.ts里面加入加入代码：
 

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
和
​​​​​​​app.use(ElementPlus)

下面是完整的main.ts代码 

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)

app.mount('#app')

3、新建登录页面，LoginView.vue

<script setup lang="ts">
import { reactive } from 'vue'
import { login, hello } from '@/api/home/LoginService'
    const formData = reactive({
        accountNo:'',
        password:'',
    });
    const imageurl = '../image/22.jpg';

    const handleLogin = () => {
        const data =  login()
        console.log('输出---->',data);
    }

</script>

<template>
  <div style="display: flex; justify-content: center; align-items: center;text-align: center;width: 100%; height: 100vh">
    <div style="width: 30%;height: auto;">
      <el-image style="width: 100%; height: 100%" :src="imageurl" />
    </div>
    <div style="width: 25%;height: auto;">
      <h3>欢迎登陆国际开趴</h3>
      <br>
      <el-form style="max-width: 600px;margin-left: 5px;" :model="formData">
        <el-form-item label="账号">
            <el-input v-model="formData.accountNo" />
        </el-form-item>
        <el-form-item label="密码">
            <el-input type="password" v-model="formData.password" />
        </el-form-item>
        <el-button type="primary" @click="hello(formData.accountNo)">Primary</el-button>
      </el-form>
    </div>
  </div>
  
  
</template>

<style scoped>
.body{
  background-color: rgb(21, 29, 22);
}
</style>

 4、新建登录api的ts文件

export const  resive  = async () => {
	return 'ggggggggg'
}

export const login = async () => {
	//const { data } = {id:'dd',};//await service.get(url)
    const data = {id:'sss',name:'dddd'}
	return data
}
export function hello(no?:string){
    console.log('hahahahahah========>',no);
    
  }