How to Create
a New Vue Project
In this video you will learn how to create a new vue project using Vue CLI tool. It's the best tool to generate real Vue application which will give you out of the box web server, page reloading, building and is fully configured to using Vue.
Hook
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.
Introduction
Hi I'm Oleksandr Kocherhin from monsterlessons-academy, where I'm teaching you how to become a developer or improve your skills of being a developer in learning by doing way. And if you are new here don't forget to subscribe and I will link everything that I'm mentioning in the description.
And just to remind you this video is a part of free series "Vue for beginners"
So let's get started.
Content
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.
Call to action
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 hourse and where we are creating together the application from empty folder to fully finished application. I will link it in the description below as well as my other courses.
If you find this video helpful, don't forget to subscribe to this channel and hit subscribe button. And I see you in my next video.