Vue.jsとFlaskを組み合わせるにはどうすればいいですか? 質問する

Question

最近、この問題（Vue.js と Flask の組み合わせ）が発生しました。

これらを組み合わせる方法は、1) シンプルなVue.jsアプリを作成するか、2) Webpackなどのモジュールバンドラーを使用して組み合わせる必要があるより複雑なVue.jsアプリを作成するかによって、少なくとも2つあります。単一ファイルコンポーネントまたは npm パッケージ。

シンプルな Vue.js アプリ:

これは実際にはかなり簡単で、それ自体非常に強力です。

Vue.js の機能 (「アプリ」) を独自のページに配置する場合は、新しいテンプレートファイルを作成します。それ以外の場合は、アプリを配置するテンプレートファイル.htmlを開くだけです。.html
- ここに Vue.js テンプレートコードが配置されます。

Vue.js JavaScript コードを HTML と同じファイルに置くことに問題がない場合は、Flask テンプレートファイルに何が必要かを把握するために使用できる、シンプルな「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>

この例では、Flask テンプレートファイル内に Vue.js JavaScript コードが含まれているため、Vue.js JavaScript を別途含める必要がないことに注意してください。小規模なプロジェクトでは、この方が簡単かもしれません。

あるいは、Vue.js JavaScript コードを独自のファイルに配置する場合は、次のようにします。
1. フォルダー内に新しい JavaScript ファイルを作成しstatic、作成するアプリにちなんで名前を付けます。
  - ここに Vue.js JavaScript コードが配置されます。
2. テンプレートファイルの下部に、.htmlVue.js を組み込むためのスクリプトタグを含めます。
  - <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    - バージョン番号は変更されるので、その行をそのままコピーしないでください。最新バージョンのリンクを取得できます。ここ。
3. また、そのテンプレートファイルの下部にも、作成した JavaScript ファイルを読み込むためのスクリプトタグを含めます。
- <script src="%% url_for('static', filename='js/YOUR_APP_NAME.js') %%"></script>
1. テンプレートファイルdivにの新しいを作成します。.htmlidapp
- <div id="app"></div>
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__)"
```
- Flask-BootstrapはFlaskの構文を切り替えると動作しないことに注意してください。Flask-Bootstrapには独自のテンプレートがあり、そこには「{{」/「}}」構文が含まれています。ここVue.js の構文を変更する方法は、Flask の構文を変更するよりも簡単です。

通常どおりページを提供します。/ 通常どおりテンプレートファイルをレンダリングします。

必要に応じて、Vue.js 2.0 Hello World JSFiddleより迅速にプロトタイピングを行い、コードをおよび.htmlファイルにコピーします.js。

フィドルが最新バージョンの Vue.js を使用していることを確認してください。

簡単！

Webpack を使用したより複雑な Vue.js アプリ:

ノードをインストールする(これは必要な npm に付属しています)。
インストールvue-cli:
- npm install -g @vue/cli
新しい Vue.js Webpack プロジェクトを作成します。
- vue create my-project
- これを行う 1 つの方法は、serverフォルダーとclientフォルダーを作成し、serverフォルダーに Flask サーバーコードを含め、clientフォルダーに Vue.js プロジェクトコードを含めることです。
- もう 1 つの方法は、Vue.js プロジェクトを Flask プロジェクト内にフォルダーとして含めることです。
Webpack 構成を設定して、app.htmlファイルが Flask フォルダーに作成されserver/templates、必要な静的 JavaScript と CSS が、Flask アプリの Vue 以外の部分で使用される静的アセットから分離されたフォルダーapp.htmlに作成されるようにしますserver/static/app/。
Vue.js プロジェクトを Flask プロジェクトと結合する場合は、npm run buildVue.js プロジェクトを含むフォルダー内から実行すると、.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 の「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 ファイルと静的アセットを作成する場所を設定しています。

Flask の「static」フォルダー ( ) 内に静的アセットを生成するように Webpack に指示しているため/static/app/...

ファイル内にこれらのアセットを含める相対 URL は、htmlWebpack によって自動的に正しく設定されます。
- 元：src=/static/app/js/app.f5b53b475d0a8ec9499e.js
static/これらの URL にあるファイルを照会すると、Flask はそれらのファイルをフォルダー内に保存しており、そのフォルダーには URL があると想定しているため、それらのファイルを提供する方法を自動的に認識/static/etc.します。
- Flask ルートを必要とする唯一の生成されたファイルは、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',

ここでは (上記)、と同じように、「launch」ページの名前を変更しているだけです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 の Blueprints 機能（）を使用しています<blueprint_name>.routeが、必ずしもそうする必要はありません。

Answer 1