Build a YouTube bookmarking site - part one - Installing Vue.js

In the first part of the build a YouTube bookmarking site course we are going to go through how to install the new Vue CLI 3 and how to set up the project we're building using Vue UI.


Prerequisites

This course assumes that you already got a good fundemental understanding of HTML, CSS and JavaScript. You should also already have taken our Getting started with Vue.js course too.

Installing the Vue CLI

In this course we are going to use the new Vue CLI (Stands for Command Line Interface) 3 with UI to set up the project we're going to create. So the first thing we're going to do now is to install the CLI.

$ npm install -g @vue/cli

Just to make sure that everything went OK we can check which version is currently active by running this command.

$ vue --version
3.0.0

Fantastic! Now we can start Vue UI and see what that looks like!

$ vue ui

The Vue UI should open automatically in your default browser once it has started.

VueTube - Vue UI

Looks good right?
As you can see there is no projects there right now, what a shame. Click the "Create" button at the top of the screen to get started with the wizard.

VueTube - Create

You probably have a favorite place on your computer to store your projects, so just click around in the file browser until you find out where you want to create the VueTube project. When you have located the spot you can click on "Create a new project here" button you'll find at the bottom of the screen.

VueTube - Location

In the project folder you fill out the same information as you find on the picture above. Project name is "vuetube", package manager is "npm" (use yarn if you want to) and the Initial commit message is also optional, but I like to use something like "Initial setup". Click "Next" to continue.

VueTube - Initial

We want to select which features to use manually, to tick the radio button next to "Manual" and click "Next".

VueTube - Features

We do not need all the features, but as you can see "Babel" and "Linter/Formatter" is already checked and that's good because we need both of them. We are also going to use "Router" to handle all of the URLs in our app and we are going to use "Vuex" to handle the app's state. We have also checked the "Use config files" because we feel that it's best to separate the different config files. Click next to continue.

VueTube - Features 2

"Lint on save" is already checked and that is good because then we get the errors and warnings everytime we save a file. The Linter that we are going to use is "ESLint + Prettier", so choose that in the dropdown to the right and then click "Next" to continue.

VueTube - Linter

We do not need to save this preset so just click "Continue without saving" and you're good to go.

VueTube - Preset

The project is now set up and everything is OK. I'm not going to cover anything more about the Vue UI in this course, so the next step will be to open your command line and find your project there. To run our new project you can write this command.

$ npm run serve
VueTube - npm run serve

If you copy the URL http://localhost:8080/ and open it in your browser you will see something like this.

VueTube - welcome

This is the default Welcome screen for Vue. As you can see there is a menu at the top with a Home and About link. These are added automatically here because we chose to use the "Router" feature. If you click the "About" link you will see that the browser is redirected to /about and you will see this page.

VueTube - about

Summary

Everything with our project is now set up correctly and we are ready to start building our app which we'll do in the next part of this course. I hope you enjoyed setting it up and if there is anything you want to ask you can find Vue Hero at Facebook


Next

Buy me a coffee

I'm working hard to create quality courses and lessons. Please consider buying me a coffee or three to support my work.