Vue + Flask 实战开发系列（六）

lask后端暂时告一段落，从今天开始，我们来到前端部分。前端能给我们带来及时的反馈。为编程带来更好的体验和成就感。如今前端的世界丰富多彩，太多可以使用的框架，再也不用我们重复造轮子了，这也极大的提高了我们开发的效率。我们只管挥洒创意就好，其他的事情交给这些框架就好。

当今前端世界最流行的三个框架Vue,React,Angular。这三个框架可谓是各有千秋，可以满足不同场景的需求。我们这套实践分享内容主要是使用Vue框架，这个框架上学习起来非常容易，很容易上手。相对React陡峭的学习曲线，Vue显得格外简单和友好。好了，选好了框架后，我们还需要选择UI组件库。基于Vue框架开发的UI组件库也有很多，例如：View UI ，Element UI等等。我们这里使用Element UI做为我们的UI组件库。它的生态很丰富，有很多开源的集成了很多日常开发中常用的功能。在这个项目中，我们采用vue-element-admin。vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，可以帮助我们快速搭建企业级中后台产品。

vue-element-admin环境搭建

我们这里使用vue-admin-template脚手架来快速搭建后台管理系统开发环境。首先，你可以通过如下命令下载这个脚手架程序。

$ git clone https://github.com/PanJiaChen/vue-admin-template.git

下载完成后，进入到vue-admin-template目录下，执行如下命令，进行依赖安装和启动。

$ npm i
$ npm run dev

程序启动成功后，通过浏览器访问地址http://127.0.0.1:9528/，将会看到下面的登录页面。

此时，你登录是可以的。默认是采用前端mock数据登录。并没有调用后端登录接口。

集成Flask后端项目

现在我们将之前的vue-flask-app目录下的api目录，全部拷贝到vue-admin-template下，完成与Flask的集成。

首先，编辑app目录下的__init__.py文件，找到app=Flask(name）将其修改为下方这样：

app = Flask(__name__,static_folder='../../dist',template_folder="../../dist", static_url_path='/')

接着需要在mian.py编写一个index函数，用于访问我们的前端应用，具体程序如下：

@app.route("/")
def index():
  return app.send_static_file('index.html')

编译前端应用为静态文件：

$ npm run build:prod

编译成功后，你的vue-admin-template目录中会，多出一个dist文件目录，这个就是我们的前端应用。此时我们启动flask后端服务后，访问地址http://127.0.0.1:5000/，也可以看到登录页面。好了，本次内容分享到此结束，下一次实现登录功能。