Vue+Flask

Create a python project.
I recommend to use Pycharm IDE which can automatically creates a python virtual environment(venv) and a terminal under it.

Install python requirements.

# IN TERNINAL(VENV)
>>>pip install flask

Add a python file app.py.
The static file folder of Flask framework default to /static. For the convenience, we set the static folder to /templates, so that we can put all frontend files in one directory /templates.

Add a directory /template.

Install Vue.js.

Install vue-cli and vue-cli-service.

Use vue-cli to create a vue project in /template.

# IN TERMINAL 
>>>cd templates
>>>vue create <project-name>

Add vue.config.js at /templates/<project-name>.
We add a vue.config.js file to change reference path of static files in index.html. Because the Flask default static files directory which allows requests of static files from browsers now is /templates, static files can not be requested from the default reference paths which are assigned at /dist/ as a related path by the vue-cli in next step. Therefore, we add an option publicPath and set publicPath to /templates/dist, so that browsers can access static files.

Build the target file into a production bundle for deployment.
The easy way to build the project is to open the UI interface of vue project.

# IN TERMINAL
>>>cd templates
>>>vue ui

vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching. The chunk manifest is inlined into the HTML.

Run app.py in virtual environment

complete!

Github url: https://github.com/liweicheng00/T_Flask_Vue