search
LoginSignup
47

More than 5 years have passed since last update.

posted at

updated at

Django + Webpack を使ってVueを動かす

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 %}を使って一部オフにしています。

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
47