Skip to content

CreateVueFlaskProjects

Jump to bottom
Oren Mishali edited this page Aug 15, 2022 · 5 revisions

This guide explains how to setup a Vue.js app with Flask backend on Windows.

Links

  1. https://cli.vuejs.org/guide/installation.html
  2. https://cli.vuejs.org/guide/creating-a-project.html
  3. https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/
  4. https://www.freecodecamp.org/news/how-to-build-a-single-page-application-using-vue-js-vuex-vuetify-and-firebase-838b40721a07/ (another good tutorial)

Install Vue CLI

  • You should first install 'Git for Windows'. This utility provides a Bash (linux like) shell that you will use basically for all commands listed below.
  • Install Node.js as explained in link #1.

Note that some commands require an interactive prompt that by default does not work from Git bash. Therefore you should setup your Git bash as explained in link #2 (see the yellow warning at the top). If you are having problems to setup Git bash that way, you can always open cmd with 'Run As Administrator...' for commands that require an interactive prompt (e.g., vue upgrade, and creation of a vue project).

Now you are ready to install Vue. Follow the guidelines in link #1 and install the Vue CLI (command line interface).

Notes:

  • we had some problems to work with npm (the Node Package Manager) from Windows, so we eventually worked with Yarn (an alternative package manager). Just to let you know...
  • After installing vue, make sure you have the latest version (upgrade otherwise ad explained in link #1).

Create and setup a Vue project

  • See in link #3 how to create a Vue project using the CLI (from git bash uding the cmd as explained before).
  • Note to select "Manually select features" and then set the features as explained in the link.
  • (For the record: We had an error "Vue packages version mismatch error". Solution: opened package.json of vue-template-compiler and changed version to 2.6.11)
  • Add Vuetify to the new project: https://vuetifyjs.com/en/getting-started/quick-start/ (Note: use vue add and not yarn add!)
  • Install material design icons:
yarn add material-design-icons-iconfont -D

or by

npm install material-design-icons-iconfont -D

(as explained in https://vuetifyjs.com/en/customization/icons/)

  • Install the axios library (this is the library that you will use for http requests).
yarn add axios

Install Visual Studio Code

Install Visual Studio Code, and set it up for Vue development as explained here: https://code.visualstudio.com/docs/nodejs/vuejs-tutorial.

Open your projects using Visual Code and make sure you are able to execute the app.

Create a Flask backend

  • Create a backend/ folder within your project, then cd backend.
  • Within the backend/ folder Create a Virtual Environment as explained here.
  • Activate the environment: source env/Scripts/activate
  • Install Flask: pip install -U Flask
  • Install flask-cors: pip install -U flask-cors
  • Add an app.py file as explained in link #3. This is where the server code resides.
  • to execute the server: python app.py

Clone this wiki locally