Как я могу объединить Vue.JS с флягой?

Я хочу использовать Vue.js и фляга вместе: Vue.js для динамического переднего конца и колба для заднего конца. Как я могу это сделать?

8
flask vue.js vuejs2 webpack

1 ответов

недавно у меня была эта проблема (объединение Vue.js and Flask).

есть по крайней мере два способа объединить их, в зависимости от того, создаете ли вы 1) простой Vue.JS app или 2) более сложный Vue.JS приложение, которое должно использовать модуль bundler, как Webpack объединить Однофайловые Компоненты или npm-пакетов.

Простой Vue.приложение ДШ:

это на самом деле довольно легко и очень мощный сам по себе. Этот шаги ниже не могут быть "лучшей практикой", чтобы сделать это, но это поможет вам начать:

  1. если вы хотите Vue.функциональность js ("приложение") чтобы быть на своей странице, создайте новый шаблон . В противном случае просто откройте что-нибудь .html файл шаблона, в котором вы хотите, чтобы приложение было.
    • вот где ваш Vue.код шаблона js будет идти.
  2. создайте новый файл JavaScript в своем static папка, назовите его после этого приложения, которое вы хотите создавать.
    • вот где ваш Vue.код JavaScript JS пойдет.
  3. в самом низу .html файл шаблона включает тег сценария для включения Vue.js.
    • <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
      • обратите внимание, что номер версии изменится, поэтому не просто скопируйте эту строку. Вы можете получить ссылку на самую последнюю версию здесь.
  4. также в этом файле шаблона, также на внизу, включите тег скрипта для загрузки только что созданного файла JavaScript.
    • <script src="%% url_for('static', filename='js/YOUR_APP_NAME.js') %%"></script>
  5. создать новый div на .html файл шаблона, который имеет id of app.
    • <div id="app"></div>

  6. вот простой пример шаблона" Hello World":

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
    • обратите внимание, что этот пример включает Vue.код JS JavaScript в файле шаблона колбы, поэтому что вам не нужно включать вю.в JS JavaScript и отдельно. Это может быть проще для небольших проектов.

  7. если вы используете Jinja2 для визуализации шаблонов, вам нужно будет добавить несколько строк кода, чтобы сказать Jinja2 не использовать {{ }} синтаксис для отображения переменных, потому что нам нужны эти символы двойной фигурной скобки для Vue.js. Ниже приведен код, который вам нужно добавить в свой app.py для этого:

    class CustomFlask(Flask):
    jinja_options = Flask.jinja_options.copy()
    jinja_options.update(dict(
        variable_start_string='%%',  # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
        variable_end_string='%%',
    ))

app = CustomFlask(__name__)  # This replaces your existing "app = Flask(__name__)"
    • обратите внимание, что Flask-Bootstrap не будет работать, если вы переключите синтаксис Flask, поскольку Flask-Bootstrap имеет свои собственные шаблоны, которые все равно будут содержать синтаксис" {{"/"}}". Вы можете видеть здесь как изменить Vue.синтаксис js, это даже проще, чем изменение синтаксиса Flask.
  8. служите страница как обычно. / Обработать файл шаблона, как обычно.
  9. если вы хотите, использовать Vue.js 2.0 Hello World JSFiddle чтобы сделать более быстрое прототипирование, а затем скопировать код в ваш .html и .js файлы.
    • убедитесь, что скрипка использует самую последнюю версию Vue.Яш!

легко!

более сложный Vue.в JS-приложение, с помощью Webpack:

  1. Установить Узел (он поставляется с npm, что нам нужно).
  2. установить vue-cli:
    • npm install -g @vue/cli
  3. создайте новый Vue.проект на JS, Webpack :
    • vue create my-project
    • один из способов сделать это-создать и , где server папка содержит код сервера колбы и client папка содержит Vue.код проекта js.
    • другой способ-иметь Vue.проект js, содержащийся как папка в вашей колбе проект.
  4. настройте конфигурацию Webpack так, чтобы app.html файл создается в вашей колбе server/templates папка и статический JavaScript и CSS, необходимые app.html создано в server/static/app/ папка, изолированные от статических активов, используемых не-Vue части вас колбу приложение.
  5. когда вы хотите объединить свой Vue.проект js с вашим проектом Flask, run npm run build из папки, содержащей ваш Vue.проект js, который будет генерировать .html файл и несколько статических файлов (JavaScript и CSS).

точные изменения, которые я сделал в моей конфигурации Webpack (через мой git commit):

client/build/webpack.dev.conf.js:

new HtmlWebpackPlugin({
-   filename: 'index.html',
-   template: 'index.html',
+   filename: 'app.html',
+   template: 'app.html',

здесь (выше) я меняю название Vue.JS "запустить" файл в приложение.html, чтобы он не конфликтовал с индексом моего приложения Flask.HTML-код'.

client/config/index.js:

module.exports = {
  build: {
    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    index: path.resolve(__dirname, '../../server/templates/app.html'),
+    assetsRoot: path.resolve(__dirname, '../../server/static/app'),
+    assetsSubDirectory: '',
+    assetsPublicPath: '/static/app',

здесь (выше) я где приложение.html-файл и статические ресурсы должен быть создан.

потому что мы направляем Webpack для генерации статических активов в" статической " папке Flask (/static/app/)...

  1. относительные URL-адреса для включения этих активов в html файл будет автоматически правильно настроен Webpack.
    • Ex:src=/static/app/js/app.f5b53b475d0a8ec9499e.js
  2. при запросе файлов по этим URL-адресам Flask автоматически узнает, как их обслуживать, поскольку они находятся в static/ папка, которая, как предполагает фляга, имеет /static/etc. URL-адрес.
    • единственный сгенерированный файл, которому понадобится маршрут колбы, - это .

client/build/webpack.prod.conf.js:

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
-    ? 'index.html'
+    ? 'app.html'
    : config.build.index,
-  template: 'index.html',
+  template: 'app.html',

здесь (выше) я просто переименовываю страницу "запуск", так же, как в webpack.dev.conf.js.

routes.py:

@web_routes.route('/app')
@login_required
def app():
    if current_user.datetime_subscription_valid_until < datetime.datetime.utcnow():
        return redirect(url_for('web_routes.pay'))

    return render_template('app.html')

здесь (выше) моя функция рендеринга. Я использую функцию чертежей Flask (<blueprint_name>.route), но у вас нет к.

15