Flask+Vue前后端分离项目的搭建（保姆级，跟着做不出来你揍我）

前言

本文主要用于自己使用，由于多次进行前后端分离开发却依然记不住vue以及Flask项目创建步骤，于是写此文章便于以后开发参考。

---

一、Vue项目创过程（仅供参考）

1.在指定文件夹下cmd,命令行输入：

npm init vue@latest

2.输入命令后输入项目名，选择是否需要一系列配置，配置选择router pinia eslint

3.选完配置之后运行提示命令

cd vue_project_name  #这里的project是创建时候自己起的

npm install          #这里可以用cnpm install

npm install element-plus --save
npm install axios
npm install sass -D

npm run dev

4.清空App.vue中内容，仅保留模板。

<script setup>

</script>

<template>

</template>

<style scoped>

</style>

5.删除components中所有文件、views下自动生成的vue文件,并清空router/index.js中的vue文件引用

//index.js
import {
    createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
   
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
   
      
    },
    {
   
      
    },
  ],
})

export default router

6.src下新建目录api、utils，并在utils中新建request.js文件

//request.js

//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = 'http://localhost:5000';
const instance = axios.create({
   baseURL})


//添加响应拦截器
instance.interceptors.response.use(
    result=>{
   
        return result.data;
    },
    err=>{
   
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

7.删除assets文件家中文件，并新建main.scss文件

//main.scss
body {
   
  margin: 0;
  background-color: #f5f5f5;
}

/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
   
  transition: all 0.3s;
}

.fade-slide-enter-from {
   
  transform: translateX(-30px);
  opacity: 0;
}

.fade-slide-leave-to {
   
  transform: translateX(30px);
  opacity: 0;
}

8.在src中main.js配置上element-plus等包

import './assets/main.scss'

import {
    createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router'
import App from './App.vue'
import {
   createPinia} from 'pinia'
// 需要安装npm install pinia-persistedstate-plugin
import {
    createPersistedState } from 'pinia-persistedstate-plugin'
import locale from 'element-plus/dist/locale/zh-cn.js'

const app = createApp(App);
const pinia = createPinia();
const persist = createPersistedState();
pinia.use(persist)
app.use(pinia)
app.use(router)
app.use(ElementPlus,{
   locale});
app.mount('#app')

9.在views文件夹下创建LoginHome.vue文件

<script setup>
import {
    User, Lock } from '@element-plus/icons-vue'
import {
    ref } from 'vue'
import {
    ElMessage } from 'element-plus'
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false)
//定义数据模型
const registerData = ref({
   
    username: '',
    password: '',
    rePassword: ''
})

//校验密码的函数
const checkRePassword = (rule, value, callback) =>