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!
Vue Version History
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.
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.
In the same month, next version was announced. It has many new features such as better typescript integration, better error handling and much more.
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.
Easy to understand and code
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.
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.
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.
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.
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.
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!!