基于fastapi+vue登记系统

1.创建fastapi项目

2.创建vue项目

npm create vue@latest
cd web
npm install
npm install element-plus

修改main.js

注册elementui和router

import './assets/main.css'
import App from './App.vue'
import { createApp } from 'vue'
import router from './router'
import ElementUI from 'element-plus'
import 'element-plus/theme-chalk/index.css'


const app = createApp(App)

app.use(router)
app.use(ElementUI)
app.mount('#app')

在components文件夹中添加登录首页Login.vue

<script setup>
// 按钮点击事件，跳转到index.vue
import {RouterLink, RouterView, useRouter} from 'vue-router'
const router = useRouter()
function login() {
  router.push('/index');
}
</script>
<template>
  <div style="display: flex;justify-content: center;margin-top: 50px">
      <h1>核酸采集平台</h1>
  </div>
  <div style="display: flex;justify-content: center;margin-top: 150px">
  <el-button @click.prevent="login">登录</el-button>
  </div>
</template>
<style scoped>
</style>

修改router的index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../components/home.vue'
import IndexView from '../components/Index.vue'
import Login from '../components/Login.vue'
import Home from '../components/home.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:'/index',
      name:'index',
      component:IndexView
    },
    {
      path:'/',
      alias:'/login',
      component:Login
    },
    {
      path:'/home',
      name:'home',
      component:Home
    }
  ]
})

export default router