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
标签:index,登记,fastapi,app,vue,components,import,router
From: https://www.cnblogs.com/Gimm/p/18258494