The first step we are going to take in building our web app is downloading the neccesary dependencies and scaffolding the project using Vue.js, VueCLI, and Vuetify. We will use npm to download our dependencies. If you haven't already, you need to install node and npm. At the time of this tutorial the LTS version of Node is 12 and npm is in 6. If you need to install or change your node version use Node Version Manager: https://github.com/nvm-sh/nvm.

Once you have node and npm set up, run the following commands:

# install the command line interface
npm install -g @vue/cli
# create project scaffolding. select 'default' option
vue create my-webcam-object-detection-app
# change to newly created project directory
cd my-webcam-object-detection-app
# add vuetify plugin. select default options
vue add vuetify

You now have all the neccesary boilerplate code for your vue app to run. Use the command:

npm install

to pull down the dependencies for the project and then type

npm run serve

to spin up a development server on your local machine. Navigate to localhost:8080 in your web browser to test the site.

In the next lesson we will take a closer look at the details of the project and explain some of the different features of the toolchain we are using and the Vue's component API.