vue3+fastapi框架实现的简单接口封装登录功能

VIP文章西柚cc

已于 2024-03-08 17:40:33 修改

阅读量633

点赞数 5

文章标签： python fastapi vue.js

于 2024-03-08 16:56:28 首次发布

本文链接：https://blog.csdn.net/weixin_44756644/article/details/136563813

版权

1. 首先搭建一个vue的项目框架

关于怎么搭建，可以看vue3的官方开发文档里面有详细介绍，包括vue框架里各个组件和路由的使用都有介绍，可自行学习，网址：https://cn.vuejs.org/guide/quick-start.html
vue项目搭建

2. 其次就是熟悉vue项目项目录并创建自己的页面

熟悉项目入口:

main.ts、App.vue 和 index.html 共同协作完成了一个 Vue.js 单页面应用程序的初始化和渲染过程。以下是它们的作用：

index.html：

index.html 是整个应用的入口 HTML 文件。
包含了应用程序的基本结构，例如头部、底部等静态内容。
包含一个 DOM 元素，通常是一个空的

，用于将 Vue 应用挂载到页面上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动化脚本平台</title>
    <link rel="icon" type="icon" href="./src/assets/favicon.ico
    ">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

main.ts

main.ts 是应用的入口文件，主要负责创建 Vue 实例、引入应用需要的库、配置全局设置等。
通过 createApp 函数创建 Vue 实例，并将根组件 App.vue 挂载到 #app 元素上。
导入并使用路由、状态管理等附加功能。
通常会在这里引入一些全局配置、插件等。

import './assets/main.css'
import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')