Skip to content

CreateVueFlaskProjects

Oren Mishali edited this page Jul 5, 2020 · 5 revisions

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.

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.

Clone this wiki locally