MawaLog

一日一日、楽しく生きる。技術と音楽が好き。

vue.js開発過程記録vol.x:各コードの分析メモそのx:Djangoとの比較イメージメモ

f:id:k_mawa:20180617021558p:plain

経緯など

ちょっと既存のWebアプリ(Django/Python)に非同期処理をアプリにかけたいのでvue.jsを特訓することになったので、メモを残していきます。目標はWebAPIを叩けるようにするアプリです。

Djangoとの比較

今回はVue.jsとPythonフレームワークDjangoとの比較をしてみました。

自分がDjangoを日常的に使うので、理解を深めるためです。Webアプリのフレームワークの側面がともにあるため類似部分も見つかったのでDjangoユーザーの方にはもしかしたら役立つ資料になるかもしれないです。

比較イメージなので、完全に1対1対応してないのであいまいです。ざっくりイメージをつかむためなので厳密ではないです。

番号 Vue.js Django 備考
1 src/router/index.js projルート(settings.pyがある場所)/urls.py + settings.pyのINSTALLED_APP部分 URLまわりとアプリ適用設定
2 src/components/ app
3 src/components/hoge.vueの<script>部分 app/views.py
4 src/components/hoge.vueの<template>部分 template.html
5 src/components/hoge.vueの<style> template.html+staticファイルディレクトリからのインポート
6 src/assets staticファイルディレクト
7 src/main.js projルート(settings.pyがある場所)/settings.py(予想。検証中)
8 src/App.vue projルート(settings.pyがある場所)/settings.py(予想。検証中)
9 (用語)データバインディング render関数とテンプレートタグ HTMLへの出力

引用・参考書籍

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

この書籍のVue.jsの実装例を引用して仕組みを理解していきたいと思います。