使用Vue.js和瓶来构建一个单页的应用的示例

　　

在这个教程中,我们将讲解如何将vue.js单页应用与瓶后端进行连接。

　　

一般来说,如果你只是想通过瓶模板使用vue.js库也是没有问题的。但是,实际上是一个很明显的问题那就是,金贾的(模板引擎)也和vue.js一样采用双大括号用于渲染,但只是一个还算过的去的解决方案。

　　

我想要一个不同的例子。如果我需要建立一个单页应用程序(应用程序使用单页组成,<强> vue-router 在HTML5的历史模式以及其他更多好用的功能)用vue.js,由瓶提供Web服务?简单地说应该这样,如下所示:

　　

瓶为<强>索引。html 强服务,<强>索引。html 包含我的vue。js应用。

　　

在前端开发中我使用Webpack,它提供了所有很酷的功能。

　　

瓶有API端,我可以从我的水疗访问。

　　

我可以访问API端,甚至当我为了前端开发而运行node . js的时候。

　　

听起来是不是很有趣?那让我们这样动手做做吧。

　　

完整的源代码,你可以在这里找的到:https://github.com/oleg-agapov/flask-vue-spa

　　

<强>客户端

　　

我将使用Vue CLI产生基本Vue。js应用。如果你还没有安装它,请运行:

　　 　　 　　美元npm安装- g vue-cli 　　 　　

客户端和后端代码将被拆分到不同的文件夹。初始化前端部分运行跟踪:

　　 　　 　　mkdir flaskvue美元 　　$ cd flaskvue 　　美元vue init webpack前端 　　 　　

通过安装向导。我的设置是:

　　

Vue只在运行时构建。

　　

安装Vue-router。

　　

使用ESLint检查代码。

　　

选择一个ESLint标准预设。

　　

不试用业力+摩卡进行单位测试。

　　

不使用守夜建立端到端的测试。

　　

好的,接着来:

　　 　　 　　$ cd前端 　　美元npm安装 　　#安装后 　　美元npm运行dev 　　 　　

这就可以开始安装<强> vue。js 应用程序。让我们从添加一些页面开始吧。

　　

添加<强>回家。vue 和<强>。vue 到<强>前端/src/组件强文件夹。它们非常简单,像这样:

　　 　　//Home.vue 　　& lt; template> 　　& lt; div> 　　& lt; p> page

　　& lt;/div> 　　& lt;/template> 　　 　　

和

　　 　　//About.vue 　　& lt; template> 　　& lt; div> 　　& lt; p> About

　　& lt;/div> 　　& lt;/template> 　　 　　

我们将使用它们正确地识别我们当前的位置(根据地址栏)。现在我们需要改变<强>前端/src/路由器/索引。js 强文件以便使用我们的新组件:

　　 　　 　　从“Vue”进口Vue 　　从“vue-router”进口路由器 　　const routerOptions=[ 　　{路径:‘/?组件:“家”}, 　　{路径:'/',组件:“关于”} 　　]=routerOptions const路线。地图(路线=比;{ 　　返回{ 　　路线, 　　组件:()=比;进口(“@/组件/$ {route.component} .vue ') 　　} 　　 　　}) 　　 　　Vue.use(路由器) 　　出口默认新路由器({ 　　路线, 　　模式:“历史” 　　}) 　　 　　

如果你试着输入<强> localhost: 8080 和<强> localhost: 8080/,你应该看到相应的页面。

　　

<人物>

　　

我们几乎已经准备好构建一个项目,并且能够创建一个静态资源文件包。在此之前,让我们为它们重新定义一下输出目录。在<强>前端/config/索引。js 找到下一个设置:

　　 　　 　　指数:路径。解决(__dirname . ./dist/index . html), 　　assetsRoot:路径。解决(__dirname“. ./dist”), 　　 　　

把它们改为

　　 　　 　　指数:路径。解决(__dirname“. ./. ./dist/index . html”), 　　assetsRoot:路径。解决(__dirname“. ./. ./dist”), 　　 　　

所以/dist文件夹的HTML, CSS, javascript会在同一级目录/前端。现在你可以运行<强>美元npm运行构建强创建一个包。

　　

　　mkdir美元后端 　　$ cd后端 　　美元virtualenv - p python3 venv

使用Vue.js和瓶来构建一个单页的应用的示例