项目仓库地址：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);}