上一节安装了flask，我们现在需要安装vue前端框架，需要使用vue-cli方便安装和管理。

安装vue-cli

先要全局安装vue-cli，可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

你还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

使用图形化界面

官方文档
已经安装最新版本的vue-cli，我很推荐这个图形化界面，非常方便。
你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程，如下图： 官网的图

图形化的界面就不需要多介绍了，有中文都能很好地使用。

新建vue项目

需要合并flask使用，所以需要将vue项目创建在flask项目根目录。

使用Vue项目管理器，选择项目地址flask-vue根目录（上节运行flask示例的文件夹），创建新项目名称vue。根据具体需求选择创建条件完成项目创建，自动跳转至项目详情页。

运行编译环境

项目详情页中，按下图点击，可运行编译和热更新，此时你就可以开始码前端代码了，Vue的编写这里就不过多介绍： 运行编译和热更新 点击右上角这个启动app按钮，自动打开新窗口，可以看到你之前创建的vue前端页面了。 TIM截图20181220114456.png

下一节Flask与Vue的关联。