Get Started

Frontend

Create Vue

vue create frontend (Version = 2)

Install NPM Modules

cd frontend
npm install
vue add vuetify

Check Vuetify Envirnoment

check vue.config.js file

npm run serve

Backend

Create Backend

mkdir backend

Install Module

pip install Flask

main.py

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

if __name__ == "__main__":
    app.run()

Start Server

cd backend
python main.py

Connect Frontend to Backend

Edit frontend/vue.config.js

module.exports = {
  transpileDependencies: ["vuetify"],
  assetsDir: "static",
  outputDir: "dist",
};

Frontend Build

cd frontend
npm run build

Edit backend/main.py

print("module [app] loaded")


from flask import Flask, render_template, make_response
import os
app = Flask(__name__
            , template_folder=os.getcwd()+'../../frontend/dist'
            , static_folder=os.getcwd()+'../../frontend/dist/static'
            , static_url_path='/static')

@app.route("/", methods=["GET"])
def page_index():
    resp = make_response(render_template("index.html"))
    return resp

if __name__ == "__main__":
    app.run()

Execute & Access

cd backend
python main.py

✅ 가상 환경을 만들어 개발하는 것 추천 Python Virtual Environment