Creating your first Vue.js App

What is Vue.js?

Vue is a progressive framework in JavaScript that is used to build web interfaces and one-page applications. Vue is user and developer-friendly, it allows us to use a lot of useful libraries and is very easy to learn. Vue is the JavaScript front-end framework to choose from when we consider speed.

Perks of learning Vue

1. Makes creating UI’s and front-end apps much easier
2. Less of a learning curve than other frameworks
3. Extremely fast and lightweight
4. Build powerful SPA apps
5. Virtual DOM
6. Growing in the industry

Things you should know before learning Vue:

1. JavaScript Fundamentals (Arrays, Objects, Conditionals, etc)
2. ES6 Module Syntax
3. High Order Array Methods — map, forEach, filter
4. Arrow Functions
5. Fetch API & Promises

Environment Setup

Install NodeJS —

To run your Vue app locally, we will need to install Node.js to use the Node Package Manager, you can download the latest version right over here → Install Node.js

Install Vue.js devtools extention

This extension allows you to see the structure of your components, the data that your components have

Install Vue CLI 3

You will have to install the Vue CLI 3 to get started, to install this you will need to make sure you have the latest version of Node.js otherwise you will get an error while installing

To install you can run the command below:

npm install -g @vue/cli

After installing — restart your terminal and run the following command to ensure that it has successfully installed. If you get a version back that means it's been successfully installed.

vue --version

After setting up your environment:

1. Create your first app by running this command:

vue create app-name

Pick a preset — default(babel, eslint) →

*Note*
Babel is a transpiler that converts JavaScript syntax to browser-readable JavaScript, HTML, and CSS

Once the project is generated you can cd into the project name. Then run npm serve for the app to compile.

npm run serve starts a development server up which checks for code changes, it will also run on the http://localhost:8080

2. OR by using Vue UI which will open up a Vue Project Manager Website where you can create an app from the website. You will have to click the Create tab, select the location where you would like to save your project, enter the project name. Here is a very helpful website that walks you through the steps

After this, follow the documentation on how to get started with a small app tutorial either from Youtube or on the documentation website here.

Here is an Anatomy of a Vue Component:

A single Vue file will look something like the example above.

The output is what your user will see once the application loads. Functionality is what adds function to your components and you keep your styling at the bottom of your file. This structure makes it easier to debug your application.