[PYTHON] Vue.js + Flask environment construction memorandum ~ with Anaconda3 ~

Introduction

I want to use Vue with my favorite Flask, so make a note of the environment construction procedure. It is a scribble for myself.

Character

procedure

creating a conda virtual environment

Create a virtual environment with the required libraries installed on Anaconda3. I usually create a development folder called scripts inside the conda environment. So, create a flask folder and a vue folder in it.

flask environment construction

from flask import Flask, render_template, request, jsonify, make_response, send_file
app = Flask(__name__, static_folder='../vue/dist/static', template_folder='../vue/dist')

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

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

Specify the build folder of vue with template_folder and static_folder.

vue application creation and build settings

Create an application in the vue folder. I create it quickly with vue ui. Create a configuration file called vue.config.js directly under the vue folder, and do as follows.

module.exports = {
    assetsDir: 'static',
  };

It is a setting to save all .js files etc. in the dist / static folder.

Complete

If you start the flask server after building with vue, the vue application will be loaded.

Recommended Posts

Vue.js + Flask environment construction memorandum ~ with Anaconda3 ~
Flask site construction memorandum
Anaconda environment construction memo
MacOS 10.11 environment construction: Powerline with Anaconda and Dein.vim
[0] TensorFlow-GPU environment construction built with Anaconda on Ubuntu
From Python environment construction to virtual environment construction with anaconda
Python + Anaconda + Pycharm environment construction
Install Python environment with Anaconda
Anaconda environment construction on CentOS7
ML environment construction with Miniconda
Anaconda3 python environment construction procedure
Anaconda3 × Pycharm environment construction memo
Ubuntu 16.04 LTS, beginner memorandum of environment construction to switch anaconda version with pyenv
From environment construction to deployment for flask + Heroku with Docker
Anaconda python environment construction on Windows 10
ruby environment construction with aws EC2
Anaconda environment construction on Mac (2018 version)
[Django] Memorandum of environment construction procedure
Easy Jupyter environment construction with Cloud9
Python environment construction (pyenv, anaconda, tensorflow)
Build Flask environment with Dockerfile + docker-compose.yml
Automate environment construction with Shell Script
Python3 environment construction with pyenv-virtualenv (CentOS 7.3)
Using Chainer with CentOS7 [Environment construction]
pytorch @ python3.8 environment construction with pipenv
Data science environment construction with Docker
Python3.6 environment construction (using Win environment Anaconda)
Image upload function with Vue.js + Flask
Environment construction with pyenv and pyenv-virtualenv
Web application created with Python + Flask (using VScode) # 1-Virtual environment construction-
[Ubuntu 18.04] Python environment construction with pyenv + pipenv
[Python] Building an environment with Anaconda [Mac]
Python (anaconda) development environment construction procedure (SpringToolsSuites) _2020.4
Change Python 64bit environment to 32bit environment with Anaconda
I tried linebot with flask (anaconda) + heroku
[Python] Create a virtual environment with Anaconda
Build Python environment with Anaconda on Mac
A memo packed with RADEX environment construction
Let's get along with Python # 0 (Environment construction)
Django environment construction
Collecting information from Twitter with Python (Environment construction)
[Memorandum] Discord distribution environment built only with Linux
Environment construction with VSCode + Remote Container (Go / Application)
DeepIE3D environment construction
Emacs-based environment construction
Analytical environment construction with Docker (jupyter notebook + PostgreSQL)
Linux environment construction
Python environment construction (Anaconda + VSCode) @ Windows10 [January 2020 version]
Building an Anaconda environment for Python with pyenv
Building a Python environment with WLS2 + Anaconda + PyCharm
Environment construction (python)
django environment construction
Installation of Python3 and Flask [Environment construction summary]
CodeIgniter environment construction
[Memo] Build a virtual environment with Pyenv + anaconda
Poetry-virtualenv environment construction with python of centos-sclo-rh ~ Notes
python environment construction
Python --Environment construction
Python local development environment construction template [Flask / Django / Jupyter with Docker + VS Code]
Flow of creating a virtual environment with Anaconda
Python environment construction