python vue 前后端分离_使用Flask和Vue.js实现前后端分离的全栈开发

在工作中，我使用Vue.js有一年多了，因为Vue.js文档完善，上手简单，打包方便等诸多优势，所以是目前很流行的前端框架，本项目也选择Vue.js作为前端框架。对于后端，本项目选择的是比较好上手、轻量级的python后台框架：Flask。

我前前后后花了大概两周的时间，踩了很多坑，参考了很多博客，最终使用Flask + Vue.js + Vuetify-UI 实现了一个比较新颖的喵星君大大四柱八字排盘系统.，这篇文章接下来会将开发的步骤和代码一一展示出来，供大家参考，希望大家能少踩点坑。

一、使用Vue-cli搭建前端框架

1、安装vue-cli

如果之前安装过了vue，可以输入vue --version 来查看当前的vue版本是否是3.x以上的版本，如果返回的版本是旧版本 (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。

查看vue-cli版本的命令行

如果提示你vue命令无法识别，那么首先全局安装vue-cli，使用如下命令行：

全局安装vue-cli命令行

安装了最新版本的vue-cli之后，推荐使用vue ui命令以图形化界面创建和管理项目，输入vue ui会弹出一个Vue项目管理器界面。

输入vue ui命令，打开项目管理界面

2、创建Vue项目

创建Vue项目界面

本项目在创建过程勾选了手动配置项目,勾选项如图所示，创建过程只需要根据图形化界面的引导完成创建。

勾选Babel，Router, Vuex, Linter配置项

选择hash路由

在项目的详情页，就可以运行编译和热更新、启动以及打包你的前端代码了。