) если вы начинаете с нуля.

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

Ответы на вопрос(1)

Решение Вопроса

Существует как минимум два способа их объединения, в зависимости от того, создаете ли вы 1) простое приложение Vue.js или 2) более сложное приложение Vue.js, для объединения которого необходимо использовать пакетный модуль, такой как Webpack.Однофайловые компоненты или пакеты npm.

Простое приложение Vue.js:

Это на самом деле довольно легко и очень мощно само по себе:

Если вы хотите, чтобы функциональность Vue.js («приложение») находилась на отдельной странице, создайте новый шаблон.html файл. В противном случае просто откройте все.html файл шаблона, в котором вы хотите разместить приложение.Вот куда пойдет ваш код шаблона Vue.js.

Если вы согласны с тем, что ваш код JavaScript Vue.js находится в том же файле, что и ваш HTML, ниже приведен простой пример шаблона «Hello World», который вы можете использовать, чтобы получить представление о том, что должно быть в файле шаблона Flask:

<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>
Обратите внимание, что этот пример включает код JavaScript Vue.js в файл шаблона Flask, поэтому вам не нужно отдельно включать JavaScript Vue.js. Это может быть проще для небольших проектов.В качестве альтернативы, если вы хотите, чтобы код JavaScript Vue.js находился в своем собственном файле:Создайте новый файл JavaScript в вашемstatic папку, назовите ее после этого приложения, которое вы хотите создать.Вот куда пойдет ваш JavaScript-код Vue.js.В нижней части.html файл шаблона включает тег сценария для включения Vue.js.<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>Обратите внимание, что номер версии изменится, поэтому не просто скопируйте эту строку. Вы можете получить ссылку на самую последнюю версиюВот.Также в этом файле шаблона, также внизу, есть тег script для загрузки файла JavaScript, который вы только что создали.<script src="%% url_for('static', filename='js/YOUR_APP_NAME.js') %%"></script>Создать новыйdiv в.html файл шаблона, который имеетid изapp.<div id="app"></div>

Если вы используете 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.Служите странице как обычно. / Отобразить файл шаблона как обычно.Если вы хотите, используйтеVue.js 2.0 Hello World JSFiddle сделать более быстрое прототипирование, а затем скопировать код в свой.html а также.js файлы.Убедитесь, что скрипка использует самую последнюю версию Vue.js!

Легко!

Более сложное приложение Vue.js с использованием Webpack:

Установить узел (он поставляется с npm, что нам и нужно).устанавливатьвя-кли:npm install -g @vue/cliСоздайте новый проект Vue.js Webpack:vue create my-projectОдин из способов сделать это - создатьserver папка иclient папка, гдеserver папка содержит код сервера Flask, аclient папка содержит код проекта Vue.js.Другой способ заключается в том, чтобы проект Vue.js содержался в папке внутри вашего проекта Flask.Настройте конфигурацию Webpack так, чтобыapp.html файл создан в вашей колбеserver/templates папку, и статический JavaScript и CSS, необходимые дляapp.html создается вserver/static/app/ папка, изолированная от статических ресурсов, используемых частями вашего приложения Flask, не относящимися к Vue.Если вы хотите объединить ваш проект Vue.js с вашим проектом Flask, запустите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 на app.html, чтобы он не конфликтовал с index.html моего приложения Flask.

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',

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

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

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

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's Blueprints (<blueprint_name>.route) но вы не должны.

 Pradeepb14 сент. 2017 г., 10:34
Было бы неплохо, если бы вы предоставили link github project с настройкой :). Я также наткнулся на эту проблему (вторая часть вашего ответа), но было так много проблем.
 Nathan Wailes14 сент. 2017 г., 10:38
Это хорошая идея ... к сожалению, я понял, что это заняло у меня некоторое время. Я могу обойти это в какой-то момент. Если вы (или кто-то еще) закончите этим, я добавлю ссылку к ответу.
 siegerts15 нояб. 2017 г., 01:04
Также предлагаю взглянуть на Nuxt (nuxtjs.org) если вы начинаете с нуля.

Ваш ответ на вопрос