我怎样才能将Vue.js和Flask结合起来？ [英] How can I combine Vue.js with Flask?

问题描述

我想同时使用Vue.js和Flask：Vue.js用于动态前端，Flask用于后端。我该怎么做？

解决方案

我最近有这个问题（结合Vue.js和Flask）。 b
$ b

至少有两种方法来组合它们，具体取决于您是在创建1）简单的Vue.js应用程序还是2）需要使用的更复杂的Vue.js应用程序像Webpack这样的模块打包工具来结合单文件组件或npm包。

$ hr
$ b

简单的Vue.js应用程序：

这实际上相当简单，而且非常强大。下面的步骤可能不是最好的做法，但它会让你开始：

1. 如果你想要Vue .js功能（app）在自己的页面上，创建一个新的模板 .html 文件。否则，只需打开任何 .html 模板文件，您就可以使用该应用程序。
   
   
   
   
   • 您的Vue.js模板代码将会继续。
   
   
   
   • 在 static 文件夹，在你想创建这个应用程序后命名。
     
     
     
     
     • 这是您的Vue.js JavaScript代码将会到达的地方。
       
   
   
   • 在 .html 模板文件的底部包含一个包含Vue.js的脚本标记。
     
     
     
     
     • < script src =https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/ vue.js>< / script>
       
       
       
       
       • 请注意，版本号会改变，那条线。您可以在此处获取最新版本的链接。
       
       <同样在该模板文件中，在底部也包含一个脚本标记来加载刚才创建的JavaScript文件。
       $ b
       
       
       • < script src =%% url_for（'static'，filename ='js / YOUR_APP_NAME.js'）%% >< / script>
       
       
       
       • 创建一个新的 .html 模板文件中的code> id app 。
         $ b
         
         
         • < div id =app>< / div>
         
         
       
       
       • 像平常一样投放页面。 /像往常一样渲染模板文件。
       
       
       • 如果需要，可以使用 Vue.js 2.0 Hello World JSFiddle 做一些更快的原型，然后将代码复制到 .html 和 .js 文件。
         
         
         
         
         • 确保小提琴使用最新版本的Vue.js！
         
         
       
       

简单！



---

使用Webpack的更复杂的Vue.js应用程序：

我为此创建了一个 server 文件夹和客户端文件夹，其中服务器文件夹包含我的Flask服务器代码，而 client 文件夹包含我的Vue.js项目代码（我使用 vue-cli 创建了一个Webpack项目）。当我想将我的Vue.js项目和我的Flask项目结合起来时，我从客户端中运行 npm run build 文件夹，它生成一个 app.html 文件和几个静态文件（JavaScript和CSS）。我建立了我的Webpack配置，以便在我的Flask server / templates 文件夹中创建 app.html 在 server / static / app / 文件夹中创建了 app.html 所需的静态JavaScript和CSS文件夹，我的Flask应用程序的非Vue部分所使用的静态资产。
$ b

我对我的Webpack配置（通过我的git commit）所做的确切更改：

client / build / webpack.dev.conf.js ：

  new HtmlWebpackPlugin（{
  -  filename：'index.html'，
  -  template：'index.html'，
 + filename：'app。 html'，
 + template：'app.html'，
  

'将Vue.js'launch'文件的名称改为app.html，以便它不会与我的Flask应用程序的'index.html'发生冲突。

client / config / index.js ：

  module.exports = { 
 build：{
 env：require（'。 /prod.env'），
  -  index：path.resolve（__ dirname，'../dist/index.html'），
  -  assetsRoot：path.resolve（__ dirname，'../dist '），
  -  assetsSubDirectory：'static'，
  -  assetsPublicPath：'/'，
 + index：path.resolve（__ dirname，'../../server/templates/app .html'），
 + assetsRoot：path.resolve（__ dirname，'../../server/static/app'），
 + assetsSubDirectory：''，
 + assetsPublicPath： '/ static / app'，
  

这里（上面）我设置了app.html文件并创建静态资产。

client / build / webpack.prod.conf.js ：

  new HtmlWebpackPlugin（{
 filename：process.env.NODE_ENV ==='testing'
  - ？ 'index.html'
 +？ 'app.html'
：config.build.index，
  -  template：'index.html'，
 + template：'app.html'，
  
 
 $ b 
这里（上面）我只是重命名'launch'页面，就像 webpack.dev.conf .js 。
 
 
 
  routes.py ：
  @ web_routes.route（'/ app'）
 @login_required 
 def app（）：
如果current_user.datetime_subscription_valid_until< ; datetime.datetime.utcnow（）：
 return redirect（url_for（'web_routes.pay'））
 
 return render_template（'app.html'）
  
这里（上面）是我的渲染函数。我正在使用Flask的Blueprints功能（< blueprint_name> .route ），但不一定要。
 
I want to use Vue.js and Flask together: Vue.js for a dynamic front-end, and Flask for the back-end. How can I do that?
解决方案
I recently had this problem (combining Vue.js and Flask).

There are at least two ways to combine them, depending on whether you're creating 1) a simple Vue.js app or 2) a more-complicated Vue.js app that needs to use a module bundler like Webpack to combine Single-File Components or npm packages.



Simple Vue.js app:

This is actually fairly easy and very powerful on its own. The steps below may not be the 'best practice' way to do it, but it will get you started:

If you want the Vue.js functionality (the "app") to be on its own page, create a new template .html file. Otherwise just open whatever .html template file you want the app to be in.


This is where your Vue.js template code will go.

Create a new JavaScript file in your static folder, name it after this app you want to create.


This is where your Vue.js JavaScript code will go.

At the bottom of the .html template file include a script tag to include Vue.js.


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>


Note that that version number will change, so don't just copy that line. You can get the link for the most-recent version here.


Also in that template file, also at the bottom, include a script tag to load the JavaScript file you just created.


<script src="%% url_for('static', filename='js/YOUR_APP_NAME.js') %%"></script>

Create a new div in the .html template file that has an id of app.


<div id="app"></div>

Serve the page as usual. / Render the template file as usual.
If you want, use a Vue.js 2.0 Hello World JSFiddle to do some quicker prototyping, and then copy the code over into your .html and .js files.


Make sure that the fiddle is using the most-recent version of Vue.js!

Easy!



More-complicated Vue.js app using Webpack:

What I did for this was to create a server folder and a client folder, where the server folder contains my Flask server code, and the client folder contains my Vue.js project code (I created a Webpack project using vue-cli). When I want to combine my Vue.js project with my Flask project, I run npm run build from within the client folder, which generates an app.html file and several static files (JavaScript and CSS). I set up my Webpack config so that the app.html file is created in my Flask server/templates folder, and the static JavaScript and CSS needed by app.html is created in a server/static/app/ folder, isolated from the static assets used by the non-Vue portions of my Flask app.

The exact changes I made to my Webpack config (via my git commit):

client/build/webpack.dev.conf.js:
new HtmlWebpackPlugin({
-   filename: 'index.html',
-   template: 'index.html',
+   filename: 'app.html',
+   template: 'app.html',
Here (above) I'm changing the name of the Vue.js 'launch' file to app.html so that it doesn't conflict with my Flask app's 'index.html'.

client/config/index.js:
module.exports = {
  build: {
    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    index: path.resolve(__dirname, '../../server/templates/app.html'),
+    assetsRoot: path.resolve(__dirname, '../../server/static/app'),
+    assetsSubDirectory: '',
+    assetsPublicPath: '/static/app',
Here (above) I'm setting where the app.html file and static assets should be created.

client/build/webpack.prod.conf.js:
new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
-    ? 'index.html'
+    ? 'app.html'
    : config.build.index,
-  template: 'index.html',
+  template: 'app.html',
Here (above) I'm just renaming the 'launch' page, same as in webpack.dev.conf.js.

routes.py:
@web_routes.route('/app')
@login_required
def app():
    if current_user.datetime_subscription_valid_until < datetime.datetime.utcnow():
        return redirect(url_for('web_routes.pay'))

    return render_template('app.html')
Here (above) is my render function. I'm using Flask's Blueprints feature (<blueprint_name>.route) but you don't have to.

                        
这篇关于我怎样才能将Vue.js和Flask结合起来？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！