はじめに
Vue.js + Flaskで作成するWebアプリのフォルダ構成を整理します。
色々なサイトを見てみたのですが、あまり綺麗にまとまっているサイトがないなーということで、本記事を書きます。
ただ、自分で考えることは非常に不毛なので誰かいい感じの記事もしくはGitを教えてくれたらなーと思っている次第です。
さらに言えば、初心者が整理する内容なのであまり良い内容だとは思いません。
フォルダ構成
例によって個人用まとめです。
izanami --- アプリケーションの名前
├ backend
│ ├ templates
│ │ └ login.html --- ログイン用のHTMLを記載、なんでここにあるかは不明
│ ├ __init__.py --- 複数のファイルが利用するものを定義(Flaskインスタンス、DB、環境変数など)
│ ├ api.py --- APIエンドポイントを書く
│ ├ config.py --- 設定情報を書いておくとこ
│ ├ models.py --- テーブル定義とそのテーブルデータのメソッドを定義
│ └ view.py --- ログイン画面のルーティングとログイン処理(init.pyが読み込む)
├ frontend
│ ├ config
│ │ └ index.js --- distフォルダの作成パス等を定義
│ ├ node_modules --- npmの便利パッケージが入っている
│ ├ src
│ │ ├ assets
│ │ │ └ logo.png --- 画像
│ │ ├ components
│ │ │ └ Home.vue --- 画面(template, script, styleを書く)
│ │ ├ router
│ │ │ └ index.js --- pathとcomponentの紐付きを書いておくとこ
│ │ ├ App.vue --- ベースとなる画面(template, script, styleを書く)
│ │ └ main.js --- Vueをnewするとこ、BootstrapVueの使用を宣言するとこ
│ └ index.html --- App.vueを呼ぶとこ
└ manage.py --- アプリ実行用スクリプト（アプリの入り口）
開発するとき
画面増やしたい：componentsを追加
処理を増やしたい：api.pyもしくはview.pyのようにBlueprintで処理を増やす
テーブルを増やしたい：models.pyを編集する