Getting Started With Vue.js

Jinal Shah  Print 
18 Sep 2018
 
Beginner
170

This article is aimed at the people who want to have a starting point for Vue JS. In this article, I have covered all the general points related to the same. Hope you find it useful!

Introduction

Software development is based on two critical things: Business strategy and technology used for launching the application in the market. Many technologies are already in the market to make your work easy and to make the application run much faster. Vue JS is one of the new software technology that is being used widely for web development. As its name implies, it is JavaScript based framework developed by Evan You for building the rich client-side application using JavaScript.

Vue Version History

  1. Vue 1.0

    So, till now you have got the basic understanding about Vue JS. Now, let’s get an idea that for how long it has been in the market and which versions are there. Evan, started working on this prototype around in the year 2012 And the first version released in February 2014.

  2. Vue 2.0

    Evan You announced the release of Vue 2.0 in April 2016. And it was released in October 2016. This release has the attractive feature in it, that is Virtual DOM. It makes rendering speed fast and memory consumption low. You can precompile your template and ship your app runtime.

  3. Vue 2.5

    In the same month, next version was announced. It has many new features such as better typescript integration, better error handling and much more.

  4. Vue 3.0

    Vue 3.0 is the latest version of Vue JS. And it has no ejecting need, ready to ship to all modern browser, accompanying GUI etc.

Vue Advantages

  1. Size

    Vue.js has the size of 18-21 kb which takes no long time for the user to download and to use it. This is the main reason behind the success of this framework. Because the success of JavaScript framework is based on its size only.

  2. Easy to understand and code

    It has a very simple structure so it is very easy to understand and code. All it needs is to you to be familiar with HTML and javascript and, then you are good to go!!

  3. Flexibility

    There is no such ‘right’ way to structure your app. You can write the way it suits you. Moreover, you can run your app quickly on the modern browser without having to worry about any browser support.

  4. Integration facility

    It is popular among web developer because it facilitates great integration facility. Because as I mentioned earlier, it is JavaScript based framework, it can be easily integrated with any framework based on JavaScript.

  5. Detailed documentation

    Documentation is the greatest support for the developers who are new or building their application for the first time. Vue.JS has detailed documentation for the user who have little idea about HTML and JavaScript.

Who is Using Vue.js?

Now, let me make it more interesting by letting you know who actually are successfully using Vue in real scenario.

Facebook has showed trust in Vue, they have used this framework for marketing side of their Newsfeed.

Netflix has applied Vue in their two smaller, internal apps.

Adobe has adopted Vue for their product called Portfolio. They have taken the easy integration advantage of the framework and migrated their existing codebase to the Vue.

Xiaomi has used Vue to build their fantastic products and for proving the framework’s strong international adoption.

Alibaba the public company of China has used Vue to give excellent experience to their users.

Interesting!! Isn't it? Yes, Vue.js has started gaining popularity because of the famous companies have already started using it in real time.

Getting Started with Vue

So, I hope you have gained the whole lot of interest in knowing more about this framework. Let’s quickly move to the prerequisites for Vue.js!!

According to me, to learn anything not only technologies, the but first thing you require is also your Interest. Now, next thing which comes in our mind is which IDE shall I use. Right? Yes, you can use any editor of your choice Like Sublime Text, Visual Studio Code etc. But I prefer using Visual Studio Code developing the app because it is free, it has various extension availability, moreover, typescript snippet is there which will add frequently used code snippets.

Once the choice regarding IDE is done. Next is to install Vue CLI to your machine. Before installing Vue CLI, NODE.JS version 8.9 or above and NPM is required. You can download node from the site: https://nodejs.org/en/ NPM comes along with Node, so installing node will install Node and NPM at once.

After performing this step, let's run the command at your command prompt to ensure the version and proper installation of it.

node –v
npm –v

If your command prompt answers the versions for node and NPM properly. Then you are good to go to the next step which is to install Vue CLI(Command Line Interface). Vue-cli command line utility responsible for quick project generation and setting up required components and much more.

To install new packages, fire the following command at your command prompt:

npm install –g @vue/cli

After this step, CLI has been installed at your machine. Before, creating a new application, ensure that proper installation has been done by firing the following command.

 vue –version

If it responds well, moves to the next step without any wait. Create your new project by firing this command:

vue create <YourAppName>

Once you are done with above all steps, just jump into your application by firing the command cd (YourAppName) and then to run your app, fire the command

 npm run serve

If everything is okay, you can open the browser with given port address and you will get to see this output at your browser

Now, let us switch to the next step after installation. Open your app in the IDE you have chosen. You might get to see whole lot of files and folders once your project is made. Right!? Don’t worry. Let’s clear it out.

Exploring Folder structure of Vue Application

Beside Package.json which contains all configuration, these are another files which are inside the initial project.

Index.html is the main app file.

There is only one div element which Vue will use to attach the DOM.

Src/main.js is the main javascript file which will be driving our app.

First line depicts the import of Vue library and next is App Component from app.vue. We set productionTip to false to avoid “you’re in development mode” in console.Next, is creation of Vue instance, by assigning it to DOM element #app, which has been defined in index.html file and telling it to use App component.

src/App.vue is single file component. It contains three parts: HTML,CSS and JAVASCRIPT. This might seem weird at first, but single file components are great in terms of management.

The script contains the import statement, which will import HelloWorld component from the component section.

Src/component/HelloWorldComponent is the component which is included by App component. It has all the style and HTML which you see when you first run the app in the browser.But, one interesting part about this component is scope attribute.

This <style scoped> attribute is added to limit this CSS to this component only. This feature won’t leak your CSS to another part.Next is the script part.

This component is exported with the name ‘HelloWorld’ and the data which will be displayed in the output is stored in "msg" variable.So, understanding of file and folder structure is very necessary to start developing the first app in any new technology.

Summary

I hope you have got the basic idea about what is Vue and how to get started with Vue. I have tried to make you clear about the basic things about Vue.js. So, keep going and coding!!

Hands-on Learning
Free Interview Books
 
+