Vue to Web: Introduction Part-1
By: Vrijraj Singh
Tags: Vue, Vueinstance, JavaScript, Vuejs, Codingurukul

VueJS is a progressive JavaScript framework & Front End framework used to develop interactive web interfaces. Focus is more on the view part, which is the front end. It is very easy to integrate with other projects and libraries.

On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Why Vue.js?

Vue.js is very lean, it's about 16kb for a production version and run very quickly. Its provide very high run time performance.

This allows you to structure your application as you want, rather than forcing it to do everything in Angular. Vue is just a presentation layer, so you can use it as an unobtrusive feature on the application page, instead of a full-scale framework. This gives you more opportunities for combining Vue with other libraries, but you are also responsible for more architectural solutions. For example, the Vue.js kernel does not include routing or ajax functions from the box, and usually assumes that you are building the application using an external module. This is probably the most important difference.

Vue.js is much simpler than Angular and React, both in terms of API, so in terms of design. You can learn almost all aspects of Vue.js quickly enough, and start writing right away.

VueJS — Environment Setup

Using CDN

You can start using VueJS file from the CDN library.

<!-- development version, includes helpful console warnings -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- or --> <!-- production version, optimized for size and speed -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

index.html File

<html>

<head>

<title>Vuejs Web App</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body></body>

</html>

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

Using CLI Command Line

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

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

+ vue-cli@2.*

added 965 packages in 355.414s

To create the project using Webpack

vue init webpack myproject

To get started, use the following command.

cd myproject

npm install

npm run dev

The Vue Instance

For create a vue instance use new Vue({}) . Inside Vue Instance have lots of properties like el (String) Property, which element on the page to controlled by vue instance. data (Object) property used to store the data for the vue instance. Use {{ }} to view the data from the vue instance.

<html>

<head>

<title>VueJs Introduction</title>

<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head> <body>

<div id="app">

<h1>{{ message }}</h1>

</div>

<script type = "text/javascript">

var MyApp = new Vue({

el: '#app',

data: {

message: 'Welcome to Vue.js'

}

});

</script>

</body>

</html>

So that's what vue instance is all about, Its all about controlling certain part of the application and storing different things within vue.js like data, methords etc. Next, I’ll show you how to use data and method property inside 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 series will be published soon.

Thanks

Happy Coding!