Presta atención porque en esta crónica vas a encontrar la respuesta que buscas.Este enunciado fue analizado por nuestros especialistas para garantizar la calidad y exactitud de nuestro contenido.

Solución:

Recientemente tuve este problema (combinando Vue.js y Flask).

Hay al menos dos formas de combinarlos, dependiendo de si está creando 1) una aplicación Vue.js simple o 2) una aplicación Vue.js más complicada que necesita usar un paquete de módulos como Webpack para combinar Single-File Componentes o paquetes npm.

Aplicación simple Vue.js:

En realidad, esto es bastante fácil y muy poderoso por sí solo:

Si desea que la funcionalidad de Vue.js (la “aplicación”) esté en su propia página, cree una nueva plantilla .html expediente. De lo contrario, solo abre lo que sea .html archivo de plantilla en el que desea que esté la aplicación.
- Aquí es donde irá su código de plantilla de Vue.js.
Si está de acuerdo con tener su código JavaScript de Vue.js en el mismo archivo que su HTML, a continuación se muestra una plantilla de ejemplo simple “Hola mundo” que puede usar para tener una idea de lo que debe estar en el archivo de plantilla de Flask:
```
    



     message 
```
- Tenga en cuenta que este ejemplo incluye el código JavaScript de Vue.js dentro del archivo de plantilla de Flask, por lo que no necesita incluir el JavaScript de Vue.js por separado. Esto podría ser más fácil para proyectos más pequeños.
Alternativamente, si desea que el código JavaScript de Vue.js esté en su propio archivo:
1. Cree un nuevo archivo JavaScript en su static carpeta, asígnele el nombre de esta aplicación que desea crear.
  - Aquí es donde irá su código JavaScript de Vue.js.
2. En la parte inferior de la .html El archivo de plantilla incluye una etiqueta de secuencia de comandos para incluir Vue.js.
  - - Tenga en cuenta que ese número de versión cambiará, así que no copie esa línea. Puede obtener el enlace para la versión más reciente aquí.
3. También en ese archivo de plantilla, también en la parte inferior, incluya una etiqueta de secuencia de comandos para cargar el archivo JavaScript que acaba de crear.
4. Crear un nuevo div en el .html archivo de plantilla que tiene un id de app.
Si está utilizando Jinja2 para renderizar sus plantillas, deberá agregar algunas líneas de código para decirle a Jinja2 que no use el sintaxis para representar variables, porque necesitamos esos símbolos de llaves dobles para Vue.js. A continuación se muestra el código que debe agregar a su app.py para hacer esto:
```
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__)"
```
- Tenga en cuenta que Flask-Bootstrap no funcionará si cambia la sintaxis de Flask, ya que Flask-Bootstrap tiene sus propias plantillas que aún contendrán la sintaxis “” / “”. Puede ver aquí cómo cambiar la sintaxis de Vue.js, es incluso más fácil que cambiar la sintaxis de Flask.
Sirva la página como de costumbre. / Renderice el archivo de plantilla como de costumbre.
Si lo desea, use un Vue.js 2.0 Hello World JSFiddle para hacer un prototipo más rápido y luego copie el código en su .html y .js archivos.
- ¡Asegúrese de que el violín esté usando la versión más reciente de Vue.js!

¡Fácil!

Aplicación Vue.js más complicada usando Webpack:

Instale Node (viene con npm, que es lo que necesitamos).
Instale vue-cli:
- npm install -g @vue/cli
Cree un nuevo proyecto de paquete web Vue.js:
- vue create my-project
- Una forma de hacer esto es crear un server carpeta y una client carpeta, donde el server carpeta contiene el código del servidor Flask, y el client La carpeta contiene el código del proyecto Vue.js.
- Otra forma es tener el proyecto Vue.js contenido como una carpeta dentro de su proyecto Flask.
Configure su Webpack para que el app.html El archivo se crea en su matraz server/templates carpeta, y la static JavaScript y CSS necesarios para app.html se crea en un server/static/app/ carpeta, aislada de la static activos utilizados por las partes que no son de Vue de su aplicación Flask.
Cuando desee combinar su proyecto Vue.js con su proyecto Flask, ejecute npm run build desde dentro de la carpeta que contiene su proyecto Vue.js, que generará un .html archivo y varios static archivos (JavaScript y CSS).

Los cambios exactos que hice en mi configuración de Webpack (a través de mi git commit):

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

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

Aquí (arriba) estoy cambiando el nombre del archivo de ‘lanzamiento’ de Vue.js a app.html para que no entre en conflicto con el ‘index.html’ de mi aplicación 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',

Aquí (arriba) estoy configurando dónde está el archivo app.html y static deben crearse activos.

Porque estamos dirigiendo Webpack para generar el static activos dentro de Flask’s “static”carpeta (/static/app/) …

Las URL relativas para incluir esos activos dentro del html Webpack configurará automáticamente el archivo correctamente.
- Ex: src=/static/app/js/app.f5b53b475d0a8ec9499e.js
Cuando se le pregunte por los archivos en esas URL, Flask sabrá automáticamente cómo servirlos, ya que están dentro del static/ carpeta, que Flask asume que tiene una /static/etc. URL.
- El único archivo generado que necesitará una ruta Flask es el app.html expediente.

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

Aquí (arriba) estoy cambiando el nombre de la página de ‘lanzamiento’, igual que en 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')

Aquí (arriba) está mi función de renderizado. Estoy usando la función Blueprints de Flask (.route) pero no es necesario.

Cuando se usa vue-cli o Webpack, el proceso se puede simplificar. Simplemente crea

vue.config.js en su proyecto de Vue, consulte: Vue config

module.exports = 
    outputDir: "../dist",

    // relative to outputDir
    assetsDir: "static" 
;

luego configura tu aplicación de matraz:

app.py

from flask import Flask, render_template

app = Flask(__name__,
            static_folder = "./dist/static",
            template_folder = "./dist")


@app.route('/')
def index():
    return render_template("index.html")

Tenga en cuenta que en el matraz static_folder y template_folder no puede ser el mismo.

Comentarios y puntuaciones

Recuerda algo, que tienes la capacidad de añadir una valoración verdadera si te fue de ayuda.

¡Haz clic para puntuar esta entrada!

(Votos: 2 Promedio: 5)

Tags : Flask / Vue.Js / Vuejs2 / Webpack /

¿Cómo puedo combinar Vue.js con Flask?

Solución:

Comentarios y puntuaciones

Utiliza Nuestro Buscador

Preguntas Relacionadas: