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

【前言】这里使用的技术栈: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)
相关推荐
whysqwhw9 小时前
Node-API 学习四
前端
阿杆9 小时前
OAuth 图解指南(阮老师推荐)
前端·后端·架构
星哥说事9 小时前
OpenResty 和 Nginx 到底有啥区别?你真的了解吗!
前端
whysqwhw9 小时前
Node-API 学习五
前端
whysqwhw9 小时前
Node-API 学习三
前端
一枚前端小能手9 小时前
🚀 Webpack打包慢到怀疑人生?这6个配置让你的构建速度起飞
前端·javascript·webpack
前端缘梦9 小时前
深入浅出 Vue 的 Diff 算法:最小化 DOM 操作的魔法
前端·vue.js·面试
月伤599 小时前
Element Plus 表格表单校验功能详解
前端·javascript·vue.js
BUG收容所所长9 小时前
JavaScript并发控制:如何优雅地管理异步任务执行?
前端·javascript·面试