Before moving forward in this blog, one should have a basic understanding of HTML, CSS, and JavaScript.
What is Vue.js ?
Vue.js is an open source JavaScript framework with various optional tools used to develop interactive web interfaces. It is one of the famous frameworks used to simplify web development. Vue.js focuses on the view layer. It can be easily integrated into big projects for front-end development without any issues.
Vue.js is created by Evan You, an ex-employee from Google. The first version of Vue.js was released in Feb 2014.
Why Vue.js ?
Following are the advantages of using Vue.js technology in web development:
1. Very Small Size: The success of JavaScript framework depends on its size. The smaller the size is, the more it will be used. One of the greatest advantages of Vue.js is its small size. The size of this framework is 18–21KB and it takes no time for the user to download and use it.
2. Easy to Understand and Develop Applications: The user can easily add Vue.js to his web project because of its simple structure. Both the small as well as large scales templates can be developed through this framework which saves a lot of time.
3. Simple Integration: Vue.js is also popular among the web developers because it facilitates them to integrate with the existing applications. This is because it is based on JavaScript framework and can be integrated into other applications built on JavaScript.
4. Detailed Documentation: The documentation with Vue.js is so comprehensive that the user who knows a little about JavaScript and HTML can develop his own application or web page.
5. Flexibility: A great deal of flexibility is another advantage of Vue.js. It allows the user to write his template in HTML file, JavaScript file, and pure JavaScript file using virtual nodes. Vue.js has proved a lot beneficial in the development of those simple applications that run directly from browsers.
Installation of Vue.js
The installation for Vue.js is very easy to start with. Any developer can easily understand and build interactive web interfaces.
There are many ways to install VueJS:
1) Using the <script> tag directly in HTML file
<html> <head> <script type = "text/javascript" src = "vue.min.js"> </script> </head> <body></body> </html>
To download vue.js go to the site https://vuejs.org/v2/guide/installation.html of VueJS and download the vue.js as per your need.
There are two versions for use - production version and development version. The development version is not minimized, whereas the production version is minimized as shown in the following screenshot. Development version will help with the warnings and debug mode during the development of the project.
2. Using CDN
We can also start using VueJS file from the CDN library. This link https://unpkg.com/vue will give the latest version of VueJS.
VueJS is also available on jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) and cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).
We can host the files at our end, if required and get started with VueJS development.
3. Using NPM
For large scale applications with VueJS, it is recommended to install using the npm package. It comes with Browserify and Webpack along with other necessary tools, which help with the development. Following is the command to install using npm:
npm install vue
4. Using CLI (Command Line Interface)
VueJS also provides CLI to install the vue and get started with the server activation. To install using CLI, we need to have CLI installed which is done using the following command:
npm install --global vue-cli
It takes a few minutes for the installation. Once done, it shows the CLI version for VueJS.
Now, we have to create the project using Webpack. Following is the command to create the project using Webpack:
vue init webpack myproject
Now to get started, we have to use the following command:
cd myproject npm install npm run dev
Once we execute npm run dev, it starts the server and provides the url for display to be seen in the browser which is as shown in the following image.
If you have any queries regarding this blog or need any help you can contact us on: contact@codersarts.com