techferment
Published in

techferment

1. Getting Started with Vue.js

This is an article for absolute beginners to Vue.js. You can also check out the video tutorial of Vue.js at TechFerment.

Vue.js is an open-source front-end JavaScript framework for building user interfaces and single-page applications. Plus, it contains a Vue Router built-in with it. So we don’t need to install an external library for using routing like React.

Why Vue.js?

  1. Vue.js is very lean, it’s about 16kb for a production version and runs very quickly. It provides very high run time performance.
  2. Easy to create a front end web app
  3. Easy to learn and implement
  4. Fast and Lightweight

Let’s get started!

VueJS — Environment Setup

You can create a Vue.js web app by using Vue CDN Library or Vue CLI.

You can start using the VueJS file from the CDN library. For Development try to use the development version CDN Library because it includes helpful console warnings that will help you in building Vue.js.

and For the Production Ready web app, you can use the production version CDN Library, which is optimized.

Now create a index.html file and load that CDN Library of Vue.js

Now in every vue.js app, you need to create Vue Instance.

To create a Vue instance usenew Vue({}). Inside Vue Instance have lots of properties like

  1. el (String) Property, which element on the HTML page to controlled by Vue instance.
  2. data (Object) property used to store the data for the Vue instance. Use {{ }} to view the data from the Vue instance.

Inside data object, you can pass any data such as number, string, object, array. Use {{ }} to view the data from the Vue instance.2. Using Vue CLI

For large-scale applications with Vue.js, it is recommended to install using the Vue CLI. To install using CLI, we need to have CLI installed which is done using the following command. But before you need to install Node.js in your system and then you will be able to install Vue CLI.

Once done, it shows the CLI version for VueJS. It takes a few minutes for the installation.

To create a new project, run:

Then you can select any presets. You can either choose the default preset which comes with a basic Babel + ESLint setup, or “Manually select features” to pick the features you need.

The default setup is good for quickly prototyping a new vue.js project, and manual setup provides more options that are likely needed for more production-oriented projects.

You can also check out the video tutorial of Vue.js at TechFerment.

Next, I’ll show you how to use data and method property inside the Vue instance.

Keep watching this and follow us for more tech articles or you can reach out to me for any doubt and suggestions and the next blog in the series will be published soon.

Thanks

Happy Coding!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vrijraj Singh

Google Developer Expert for Web Technologies & Firebase | Developer Advocate | GDG Organizer for GDG Jalandhar