如何將Vue.js與Flask結合使用？

我想同時使用Vue.js和Flask：Vue.js用於動態前端，Flask用於後端。我怎樣才能做到這一點？如何將Vue.js與Flask結合使用？

來源

2017-09-14 Nathan Wailes

我最近有這個問題（結合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），但您不需要。

來源

2017-09-14 08:28:46

這將是很好，如果你提供鏈接github項目與設置:)。我也偶然發現了這個問題（答案的第二部分），但問題很多。 – Pradeepb

這是一個好主意......不幸的是，我可以看到帶我一陣子。我可能會在某個時候解決它。如果你（或其他人）最終這樣做，我會添加鏈接到答案。 –

另外，如果你是從頭開始，我建議看看Nuxt（https://nuxtjs.org/）。 – siegerts

如何將Vue.js與Flask結合使用？

回答

相關問題