CreateVueFlaskProjects

Create a Vue App on Windows

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/

Upgrade Vue to latest

See command in [1]

• We work with yarn (initially installed it with an installer).
• Vue upgrade did not work from Git Bash. Had to open cmd with 'Run As Administrator...' and then it worked.

Create a project with vue-cli

• See in [1] how to create from git bash (update .bashrc etc.) or use the cmd.
• Had an error "Vue packages version mismatch error". Solution: opened package.json of vue-template-compiler and changed version to 2.6.11)
• Create the project using 'vue create' or 'vue ui'. We select manually the features (ESLint+Prettier...)
• Add Vuetify: https://vuetifyjs.com/en/getting-started/quick-start/
• Install MD icons: yarn add @mdi/font -D (https://vuetifyjs.com/en/customization/icons/) (update: we got a compile error which was solved by running: yarn add material-design-icons-iconfont -D, so this is probably the command we need to install the icons...)
• Open Visual Code on the project.

More installations

• yarn add axios (for http connections)

Previous notes

• We got weird errors from the linter. We had to modify an entry in package.json to the following:

"extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],

It is related to the babel config that we choose in the skeleton step.

Create a Flask backend

• Create backend/ folder within the previous project, cd backend.
• 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