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

云霄IT2025-09-05 11:44

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

一、创建vue3项目

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

bash 复制代码

npm create vite@latest frontend

选择框中选择：

Framework: Vue
Variant: JavaScript 或 TypeScript

bash 复制代码

cd frontend
npm install

启动本地开发

bash 复制代码

npm run dev

一、vue3项目编写代码

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

javascript 复制代码

<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文件修改静态资源路由

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

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

bash 复制代码

cd frontend
npm run build

四、fastapi部署上线

python 复制代码

from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.responses import FileResponse, PlainTextResponse
import uvicorn

app = 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)