Let’s Learn Vue.js

4 min readSep 8, 2023

Hi! In this article, I want to tell the Vue.js project creation part directly. There are many resources that already tell about other things. Although it is difficult to learn by doing, I think it is a faster and more effective way.

First, let’s choose what we will use as editor. The best editors are listed below. I will prefer VsCode because it is both free and I have used it before. Apart from these, you can also choose Atom or SublimeText if you are used to it.

First of all, Node.js needs to be downloaded and installed if you do not have it.

1- npm install vue latest

We install lastest version of the Vue with this command.

2- npm install -g @vue/cli

We install with this command to be able touse Vue Cli.

vue — version We can check with it.

3- vue create project-name

Then we create a new project with this command. When a Vue.Js project is created, the following file structure appears.

4- Then, we enter our project file with the cd project-name command.

And we start the Vue project with the npm run serve command.

When we open http://localhost:8080, we can see our automatically created first page.

Vue.Js Project Without Using Npm

To understand what a Vue.Js project is basically, let’s make an application without using npm.

We will create only 2 files, one Html and one Js.

We must add the following script to the head tag in our index.html file so that we can use Vue.Js.

<script src=”https://unpkg.com/vue@3”></script>

And we give an id by adding a div inside the body tag.
Finally, we add this script because we want to make the js codes in a separate file.

<script src=”app.js”></script>

index.html

On the app.js side, the basis of the work is as follows. We create it with Vue.createApp() and perform operations in it.
Then we mount the id we gave to the div tag in HTML with app.mount(“#app”); . That’s actually the basics of it.