Learning Vue.js

3 min readJun 11, 2019

Coming from a background of building web applications with at the beginning just HTML, CSS and some JavaScript and then working with Wordpress and later a React.js environment, recently I also grew a bigger interest in learning about Vue.js. Now I hope to make this interesting and informative for you to follow me along my journey of learning Vue.

What is Vue? It’s a JavaScript Framework for building the front end of web applications. Other similar or well known frameworks include React and Angular.

Why am I writing down my journey of building a web application in Vue.js? While there are a lot of tutorials, written ones and videos, and a lot of well answered Stack Overflow questions, I still find myself at some points where I get stuck and cannot find the answer for my problem. A lot of times tutorials seem to be leaving out all the easy stuff because for the writer they seem to be implicit, but when starting to work on a new project with a new environment I believe many people find themselves, just as me, stuck at some — probably minor — problem. And I hope while finding answers for myself, I can provide those answers for others too. It makes sense to me to write this down as some sort of documentation on my progress from the very beginning, before I become better at using the framework or used to some syntax or structure the framework provides. Please feel free to leave me some constructive feedback on what information is wrong and what I have missed.

Before starting with Vue. My basic setup includes having npm as my package manager installed (get npm and node.js here) and I’m working with my bash terminal on a macOS system. (Side note: My node.js version was still on 9.x at that moment, but after updating to 10.x the project still works.)

Setting up a new project in Vue.js. Browsing around ‘Getting Started with Vue.js’ pages and the documentation and tutorials on the Vue.js homepage, I soon found out about Vue CLI. Vue CLI is very similar to ‘Create React App’ for React.js. It sets up a ready to run project environment that can be modified and expanded according to ones needs. So basically I ran the command

$ npm install -g @vue/cli

to install Vue CLI,

$ vue --version
3.8.2

to check my installation and version, which is 3.8.2 at the moment, and then

$ vue create test-project

to create my Vue project. This creates a folder with the needed node modules, webpack defaults, intialized git project, a README.md file and other files such as aindex.html, the main App.vue component and a folder with a HelloWorld.vue component and a few more files that don’t seem too important, if I don’t want to change them yet. I’ve listed the general structure below.

- node_modules/
- public/
  |- favicon.ico
  |- index.html
- src/
  |- assets/
  |- components/
     |- HelloWorld.vue
  |- App.vue
  |- main.js
- .gitignore 
- babel.config.js
- package-lock.json
- package.json
- README.md

To give it the first try I followed the tutorial and run the following command in my project folder to start the app.

$ npm run serve

The command line should display something similar to this.

Compiled successfully in 3664ms 16:38:55App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.14:8080/Note that the development build is not optimized.
To create a production build, run npm run build.

Now the app can be accessed though a browser on http://localhost:8080/. This concludes my journey for today.

You can visit my project on my Github (https://github.com/revialim/vue-project) or come back to read in a few days.

Keep reading here: Leaning Vue.js — Part 2

Learning Vue.js

Written by Lilian Hung