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 %}を使って一部オフにしています。
実際動いている例をこちらに用意しました。ソースなど参考になればと思います
今後の予定：デプロイするときの注意点
デプロイするときに多少気をつける点があります。走り書きでこちらに書いていますが、機会があればまた改めて投稿したいと思います