Django + Webpack を使ってVueを動かす #Vue.js

Django上でVueを使ってみたくなりました。Webpackを使うのがよさそうだと思いました。ここを結構参考にしています。下記手順。

WebpackとVueの準備

npmパッケージのインストール

Djangoのプロジェクトディレクトリに移動する。必要なnpmパッケージをインストールする

npm init -f
npm install --save-dev webpack webpack-bundle-tracker vue

webpack.config.jsを作成・編集

webpackの設定ファイルであるwebpack.config.jsを編集する

touch webpack.config.js

webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  context: __dirname,

  entry: './assets/js/main.js', // これがエントリーポイント

  output: { // コンパイルされたファイルの設定
      path: path.resolve('./assets/bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],

  resolve: {
    alias: {
　　　// 完全には理解できてないですが、
　　　// 下記エイリアス設定しないとvue走りません
      'vue': path.resolve('./node_modules/vue/dist/vue.js'),
    }
  },
}

エントリーのmain.jsを作成・編集

mkdir -p assets/js
touch assets/js/main.js

とりあえず内容は下記のみ

assets/js/main.js

window.Vue = require('vue');

コンパイル

./node_modules/.bin/webpack --config webpack.config.js

これでwebpack.config.jsのoutputで指定したとおり、assets/bundles/に「main-(ハッシュ値).js」というファイルができます。

Djangoの設定

django-webpack-loaderのインストール

pip install django-webpack-loader

settings.pyを設定します

settings.py


...

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'assets'), 
)

...

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    }
}

...

INSTALLED_APPS = (
 ...
 'webpack_loader',
)

テンプレートの書き方

urls.pyの設定などについては割愛します。通常のDjango appと同様です。テンプレートの書き方だけ少し注意が必要です。
2つポイントがあって、まずwebpack-loaderをよぶテンプレートタグが必要です。もう一つは、vueのテンプレートもデフォルトで{{ }}をつかっているので、Djangoテンプレートとの競合を避ける必要があります。

とにかく下記を御覧ください

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Example</title>
 </head>

 <body>
 {% verbatim %}
 <div id="app">
 {{ message }}
 </div>
 {% endverbatim %}

{% render_bundle 'main' %}
 <script>
 var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
 })
 </script>
 </body>

{% render_bundle 'main'%}のところにコンパイルされたjsがはいります。

また、vueのテンプレートと競合しないよう、djangoのテンプレートエンジンは{% verbatim %}を使って一部オフにしています。

実際動いている例をこちらに用意しました。ソースなど参考になればと思います

今後の予定：デプロイするときの注意点

デプロイするときに多少気をつける点があります。走り書きでこちらに書いていますが、機会があればまた改めて投稿したいと思います