如何将Vue.js与Flask结合使用？

问题描述：

我想同时使用Vue.js和Flask：Vue.js用于动态前端，Flask用于后端。我怎样才能做到这一点？如何将Vue.js与Flask结合使用？

答

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

至少有两种方法可以合并它们，具体取决于您是在创建1）简单的Vue.js应用程序还是2）需要使用Webpack之类的模块打包程序的更复杂的Vue.js应用程序结合Single-File Components或npm包。

简单Vue.js应用：

这其实是相当容易和自身非常强大。下面的步骤可能不是'最佳实践'的方式，但它会让你开始：

如果你想Vue.js功能（“应用程序”）在自己的网页上，创建一个新的模板.html文件。否则，只需打开任何.html模板文件，您想要应用程序。
- 这是您的Vue.js模板代码将去的地方。
在您的static文件夹中创建一个新的JavaScript文件，在您想创建此应用程序后命名。
- 这是您的Vue.js JavaScript代码将去的地方。
在.html模板文件的底部包含一个包含Vue.js的脚本标记。
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
  - 注意，版本号会改变，所以不要只是复制该行。您可以获取最新版本here的链接。
也是在那个模板文件，也是在底部，包括脚本标记加载JavaScript文件刚刚创建。
- <script src="%% url_for('static', filename='js/YOUR_APP_NAME.js') %%"></script>
创建具有的app的id的.html模板文件的新div。
- <div id="app"></div>

下面是一个简单的 “Hello World” 示例模板：

<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> 
</head> 
<body> 
<div id="app"> 
    <p>{{ message }}</p> 
</div> 
<script> 
new Vue({ 
    el: '#app', 
    data: { 
    message: 'Hello Vue.js!' 
    } 
}) 
</script> 
</body>

如果您使用Jinja2的渲染你的模板，你将需要添加几行的代码告诉Jinja2不要使用{{ }}语法来呈现变量，因为我们需要Vue.js的双花括号符号。下面是你需要添加到您的app.py做到这一点的代码：

class CustomFlask(Flask): 
    jinja_options = Flask.jinja_options.copy() 
    jinja_options.update(dict(
     variable_start_string='%%', # Default is '{{', I'm changing this because Vue.js uses '{{'/'}}' 
     variable_end_string='%%', 
    )) 

app = CustomFlask(__name__) # This replaces your existing "app = Flask(__name__)"

即成页面如常。 /照常渲染模板文件。
如果你想，用一个Vue.js 2.0 Hello World JSFiddle做一些快速原型，然后在代码复制到你的.html和.js文件。
- 确保小提琴使用的是最新版本的Vue.js！

简单！

更复杂，使用的WebPack Vue.js应用：

Install Node（它与故宫，这是我们所需要的）。
安装vue-cli：
- npm install -g @vue/cli
创建一个新的Vue.js的WebPack项目：
- vue create my-project
- 一种方式做，这是创建一个server文件夹和一个client文件夹，其中server文件夹包含Flask服务器代码，而client文件夹包含Vue.js项目代码。
- 另一种方法是将Vue.js项目作为一个文件夹包含在您的Flask项目中。
设置您的WebPack的配置，使您的瓶server/templates文件夹中创建app.html文件，静态JavaScript和CSS通过app.html需要的是在server/static/app/文件夹中创建，从非使用的静态资产隔离你瓶子的应用程序部分。
如果要将Vue.js项目与Flask项目结合使用，请从包含Vue.js项目的文件夹中运行npm run build，该文件夹将生成.html文件和几个静态文件（JavaScript和CSS）。

我对我的WebPack配置做出确切的改变（通过我的git的承诺）：

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

new HtmlWebpackPlugin({ 
- filename: 'index.html', 
- template: 'index.html', 
+ filename: 'app.html', 
+ template: 'app.html',

这里（以上）我改变的名称Vue.js'启动'文件到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文件和静态资产应创建。

因为我们指导的WebPack产生瓶的“静态”文件夹（/static/app/）内的静态资产...

的相对URL包括html文件中的这些资产将被自动设置正确通过Webpack。
- 例：src=/static/app/js/app.f5b53b475d0a8ec9499e.js
当这些网址查询的文件，瓶将自动知道如何为他们服务，因为他们是static/文件夹，这瓶假设有一个/static/etc. URL中。
- 唯一生成的需要烧瓶路线的文件是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',

这里（如上图），我只是重命名 '推出' 页面，相同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')

这里（上图）是我的渲染功能。我正在使用Flask's Blueprints功能（<blueprint_name>.route），但您不需要。

这将是很好，如果你提供链接github项目与设置:)。我也偶然发现了这个问题（答案的第二部分），但问题很多。 – Pradeepb

这是一个好主意......不幸的是，我可以看到带我一阵子。我可能会在某个时候解决它。如果你（或其他人）最终这样做，我会添加链接到答案。 –

另外，如果你是从头开始，我建议看看Nuxt（https://nuxtjs.org/）。 – siegerts

如何将Vue.js与Flask结合使用？

相关推荐