Vue+Flask - template 만들기

Vuejs를 사용하면서 잘 맞는 middle ware인 Flask를 한번에 프로젝트로 만들어 관리하기..

 

 

1) Vue Project 만들기

  https://vuetifyjs.com/en/getting-started/quick-start/

Quick start — Vuetify.js

여러가지 프로젝트 생성방법 중, vue-cli 를 활용한 방법으로, 위 Quick-start에 잘 나와 있음.

$ vue create my-app
// navigate to new project directory
$ cd my-app

 

vue 설정 참조 사이트

https://kdydesign.github.io/2019/04/22/vue-cli3-tutorial/

[Vue.JS] Vue-CLI 3 시작하기

설치 옵션을 Manual 로 선택 후,

TypeScript, Router, Vuex 등을 추가 한다.

package.json으로 설정하고.

serve 옵션으로 " --open --hot" 추가 새창으로 바로 hot deploy를 해줌.

"scripts": {
    "serve": "vue-cli-service serve --open --hot",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

 

vue plugin 중 vuetify 추가

vue add vuetify

Flask 추가

npm install flask

Flask 용 app.py 생성

import os
from flask import Flask, request, jsonify, make_response
from flask_cors import CORS

ROOT_PATH = os.path.dirname(os.path.abspath(__file__))
STATIC_PATH = os.path.join(ROOT_PATH, 'dist')

app = Flask(__name__, static_folder=STATIC_PATH, static_url_path='')
CORS(app)

# Post sample
@app.route('/test/data', methods=['POST'])
def post_data():
    body = request.get_json()
    print(body)
    res = []
    res.append(body)
    return jsonify(res)

# Get sample
@app.route('/test/people', methods=['GET'])
def get_people():
    people = [{'name': 'Alice', 'birth-year': 1986},
              {'name': 'Bob', 'birth-year': 1985}]
    return jsonify(people)



@app.route('/')
def response_test():
    return app.send_static_file('index.html')


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

 

이제 실행

npm install
npm run serve

 

 

vue 관련 구현은 아래 site에 자세히 나와 있음

https://vuetifyjs.com/

Vue Material Design Component Framework — Vuetify.js

 

 

[오류 처리 ]

1. vuetify/lib

ERROR in D:/git/cds/src/plugins/vuetify.ts(2,21):
2:21 Could not find a declaration file for module 'vuetify/lib'. 'D:/git/cds/node_modules/vuetify/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/vuetify` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuetify/lib';`
    1 | import Vue from 'vue';
  > 2 | import Vuetify from 'vuetify/lib';
      |                     ^
    3 | 
    4 | Vue.use(Vuetify);
    5 | 
Version: typescript 3.8.3
...

위와 같은 오류 발생시

tsconfig.json에 아래 내용 추가함.

// tsconfig.json
"compilerOptions": {
    "types": ["vuetify"],
...

 

 

참조 소스

https://github.com/sncap/VueFlaskTemplate.git