Flask와 Vue.js 결합

**Flask* 및 Vue.js(웹팩 없음)를 사용하여 HTML 페이지를 노출하려면 Vue.js가 작동할 수 있는 위치를 알 수 있도록 무언가를 설정해야 합니다.*


Flask는 템플릿 언어인 Jinja를 사용하여 웹 페이지에 정보를 표시합니다. 그리고 Vue.js와 마찬가지로 구분 기호는 다음과 같습니다.

{{ ... }}

예

진자 예

<title>{% block title %}{% endblock %}</title>
<ul>
{% for user in users %}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
{% endfor %}
</ul>

Vue.js 예제

<div id="app">
  {{ message }}
</div>

So, how to make them live together?

해결책

Vue.js에서는 구성 요소의 구분 기호를 변경할 수 있습니다!

var app = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data: {
      message: 'Hello Vue!'
    }
  })

<div id="app">
  [[ message ]]
</div>

이를 통해 Vue.js와 Jinja는 함께 살 수 있고 Flask로 Vue.js 페이지를 표시할 수 있습니다. 👍

연결

플라스크 : https://flask.palletsprojects.com/en/1.1.x/

Vue.js : https://vuejs.org/

진자 : https://jinja.palletsprojects.com/en/2.11.x/

그것이 당신을 도울 수 있기를 바랍니다! 😀