How to Create a New Vue Project
How to Create a New Vue Project

In this video I want to talk about git aliases, what aliases are people using to be more efficient with git and what aliases I'm using based on my 10 years development experience.

So here I'm in official website VueJS.org and you can see "Get started" button. There is a lot of information here but we are interested only in installation. So here you can install Vue directly from CDN but it's not interesting for us because it's more for testing purposes. We are building real application so we need to use cli. Vue provides for us official CLI to quickly create projects.

Why do we want CLI? CLI is a command line tool, which means it will help us to setup a project, install webserver, update files on the fly and much more. With CLI we can jump in writing code in a matter of minutes. This is why I'm clicking Vue CLI link and here is a official website cli.vuejs.org. In the installation section there is an important thing. Here we have NodeJS version requirement. Node version 10+ is recommended. So on your machine you need to install NodeJS. If you don't have it just jump in nodejs.org and download it there. I always prefer to use LTS version because it's more stable. But Vue will also work with current version without any problems.

To check that you have Node on your machine you can just write

node -v

It doesn't exactly mater what version of Node you have. If it's bigger than 10 you should be fine.

To install vue-cli on your machine you need to run

npm install -g @vue/cli

If you write in console

vue --version

it means that you successfully installed Vue-cli on your machine.

Now we need to create new project. We just need to write

vue create name

But here is one important point. If you are on Windows maybe your console (terminal) doesn't support TTY (interactive console). When we start to create a project Vue-cli asks us about some changes that we want to apply. If you are using default termin on Windows I suggest you to install Git Bash or Cmder.They are both nice command line tools for Windows. Now let's create our first project.

vue create vue-for-beginners

I'm hititng enter and I'm in this interactive mode. So here we can pick default preset or manually select features. And this is exactly what we want because there is some stuff here that we want to select.

We want to select
- Babel, Router, Linter
- Use history mode for router -> No
- Eslint with error prevention only
- Lint of Save
- Put configs in dedicated files

As you can see having interactive mode is crusial. In other case Vue will just install default babel and eslint. As you can see, we successfully finished the installation and to start using it we need to write

yarn serve

If you don't have yarn on your machine use can just install it with

npm install -g yarn

As you can see everything is working and our project is running on port 8080.

Let's now change code a little bit. We need to jump to src/App.vue. Here is want to remove everything and just write

<template>
  <h1>Vue for beginners</h1>
</template>

As you can see now we are getting in browser our message.

It can also happen that you don't have syntax highlighting for vue files. So you just need to install some plugin in your editor. If you are using for example VSCode just google vue VSCode plugin and install it.

Also I can recommend you to install prettier tool which formats code on save. If you don't know what is it I already made video about it. I will link it in the description box below.

So you learned the most correct path to create Vue application. So don't just create index.html and through vue script inside but you are using vue cli to generate a project with webserver and code reloading.

If "Vue for beginners" is too easy for you go check my advanced course about Vue which is going 10 course and where we are creating together the application from empty folder to fully finished application.

📚 Source code of what we've done