X
    Categories: Vue.js

Getting Start with Vue.js

Getting Start with Vue.js

Hi, Vue js is a another light weighted framework like an angular js. Which is used to built a single page applications. Lets see how to install vue.js and gettings start with it.

Lets Install Required dependencies

By using Npm install vue js

Enter the below command to install vue.js vue resources and bootstrap

npm install vue vue-resource bootstrap

Lets create main files

touch index.html app.js
Start Html :
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue.js</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>

  <!-- navigation bar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> Welcome to Vue World</a>
    </div>
  </nav>

  <!-- main body of our application -->
  <div class="container" id="events">
    <h1>{{ Title }}</h1> 
  </div>

  <!-- JS -->
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
  <script src="app.js"></script>
</body>
</html>

Call Bootstrap for css
Call vue.js and vue-resource.js libraries to start with Vue


Lets Create New Vue Instances
new Vue({
// We want to target the div with an id of 'events'
  el: '#appTitle',
  data : {
  	Title : 'Say Hello to World!'
  }
});

el => Where we need to target

data => key will be the object where all our ViewModel data is registered
Lets run  your URL in your browser : http://localhost:8888/vueExamples/

It will display the “Say Hello to World!” at Title area.
Thats it, Now you have installed Vue js Succcessfully.

Marimuthu: