vue3前端开发的基础教程——快速上手

【前言】这里使用的技术栈：fastapi+vue3+pycharm

一、创建vue3项目

在项目的文件夹使用下面命令创建vue3前端框架代码

npm create vite@latest frontend

选择框中选择：

• Framework: Vue
• Variant: JavaScript 或 TypeScript

cd frontend
npm install

启动本地开发

npm run dev

一、vue3项目编写代码

在frontend>src>App.vue中编写网站首页的代码，如下面

<script setup>
const name = '世界'
</script><template><h1>你好，{{ name }}！</h1>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

npm run dev启动项目就可以在本地愉快地编写代码啦！

三、打包发布

代码在本地编写调试完成后就可以打包发布了

在frontend\vite.config.js文件修改静态资源路由

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vite.dev/config/
export default defineConfig({base: './',   // 增加这个代码plugins: [vue()],
})

然后运行命令打包静态资源文件，自动生成dist文件夹

cd frontend
npm run build

四、fastapi部署上线

from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.responses import FileResponse, PlainTextResponse
import uvicornapp = FastAPI()# 静态文件托管（JS, CSS, 图片等）
app.mount("/", StaticFiles(directory="../frontend/dist", html=True), name="static")# 首页路由，返回 index.html
@app.get("/")
async def read_index():return FileResponse("../frontend/dist/index.html")if __name__ == '__main__':uvicorn.run("main:app", host="127.0.0.1", port=8080)