AppDividend
Latest Code Tutorials

Vue cli Tutorial With Example From Scratch

7,319

Get real time updates directly on you device, subscribe now.

Vue cli Tutorial With Example From Scratch is the topic we will discuss today. At the time of this post, you need to have Node.js install and version >= 8 because I am using @vue/cli 3.0. Otherwise, it will not work. Vue is also perfectly capable of powering sophisticated Single-Page Applications. Vue provides reactive and composable view components. It utilizes a virtual DOM. It maintains focus in the core library, with concerns such as routing and global state management handled by companion libraries.

Vue cli Tutorial

First, we will install the vue cli, and then we will start working on that.

Step 1: Install Vue cli.

Go to your terminal and hit the following command.

Note: I am using @vue/cli 3.0. It is right now in alpha version.
npm install -g @vue/cli
         or
yarn global add @vue/cli

It will install Vue cli globally. Now to generate the vue project, type the following command.

vue create vuepro

It will install the necessary files and dependencies. After that, you need to start the server with the following command.

npm serve
  or
yarn serve

Switch to this browser URL: http://localhost:8080/  You can see our Vue.js project is up and running.

Step 2: Folder Structure.

Following is the folder structure of the project. Remeber here; We are using Components in Vue. So the syntax of the data property is different. In simple vue project, we are defining the data property to access the values of properties, but in this scenario, we are using data as a function, and it returns the object that contains the value.

Vue cli folder structure

Our primary concern folder is the src folder. In this folder, there are two files and one folder.

  1. App.vue
  2. main.js
  3. components folder

Book your flight to a top destination on this special promo! Get up to $40◊ off with promo code TOP40 Book Now!In the App.vue file, all the components are included in this file. Right now, in this file, there is one component called HelloWorld.vue. HelloWorld.vue file resides in components folder. So all the other components are created inside components folder and included in the App.vue file. Vue initialization is done inside a main.js file.

// main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

Now, go the public folder. In that, there is an index.html file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
    <title>vuepro</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Here our Vue application is running inside div tag of id app. Vue instance is binding with this div tag.

Step 3: Create one component.

Inside components folder, make one component called Ether.vue

// Ether.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
   export default {
   name: 'Ethereum',
   props: {
      msg: String
   }
}
</script>

Above two-way is a standalone component. It has own properties and methods. If we want to see the output of this component, then import this component in the App.vue file.

// App.vue

template>
  <div id="app">
    <HelloWorld msg="welcome to the blockchain world"/>
    <Ether msg="Ethereum" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import Ether from './components/Ether.vue';

export default {
  name: 'app',
  components: {
    HelloWorld,
    Ether
  }
}
</script>

Here I have passed the property name msg. So we can display that property inside our component. So the necessary flow is from top to bottom. A parent can give the property to its child component.

Event Binding in Vue.

If we want to change the value of the property when the button is clicked, you can write the following code to do that.

// Ether.vue

<template>
   <div>
      <h1>
          {{ price }}
      </h1>
      <button @click="clicking()">Change Value</button>
  </div>
</template>

<script>
   export default {
   data() {
         return {
            price: 200
         };
      },
   methods: {
      clicking() {
         this.price = 300;
      }
   }
  }
</script>

So, now when we click the button, a click event is triggered. Click event calls the clicking() function. That function changes the price value. Vue is reactive, so when the property is changed, it immediately reflects the value in the dom and gets updated.

Related Posts
1 of 14

Handling User Input.

In the components folder, make one file call Form.vue

// Form.vue

<template>
   <div class="container">
      <div class="panel panel-primary">
         <div class="panel-heading">
            <h3 class="panel-title">Add User</h3>
         </div>
         <div class="panel-body">
            <form>
               <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" class="form-control" placeholder="Name" v-model="name">
               </div>
               <div class="form-group">
                  <label for="email">Email</label>
                  <input type="text" class="form-control" placeholder="Email" v-model="email">
               </div>
               <button type="submit" class="btn btn-primary">Submit</button>
            </form>
         </div>
      </div>
      <div class="panel panel-success">
         <div class="panel-body">
            My Name is : {{ name }}
            My Email is : {{ email }}
         </div>
      </div>
   </div>
</template>

<script>
   export default {
  
   data () {
      return {
           name: '',
           email: ''
      }
   }
}
</script>

Here, we have used two-way data binding concept.

Now, import this file into the App.vue file.

// App.vue

<template>
  <div id="app">
    <Form />
  </div>
</template>

<script>

import Form from './components/Form.vue';

export default {
  components: {
    Form
  }
}
</script>

Now, go to the browser, as you typing in the name text box, it’s value is updated in the below panel. So two-way data binding is there.

Computed Properties.

In the components folder, make one new file called Computed.vue.

// Computed.vue

<template>
   <div class="container">
      <button v-on:click="counter++" class="btn btn-success">Increment</button>
      <button v-on:click="counter--" class="btn btn-danger">Decrement</button>
      <hr/>
      <p>{{ view }}</p>
   </div>
</template>

<script>
   export default {
  
   data () {
      return {
           counter: 0
      }
   },
    computed: {
      view: function () {
         return this.counter < 0 ? 0 : this.counter;
      }
   }
}
</script>

Here, we have taken two buttons.

  1. Increment
  2. Decrement

When the counter value is < 1. It is set to 0. So it will compute the counter property and set it to according to written logic in the function. In our case set to 0.

Import this file into the App.vue file.

// App.vue

<template>
  <div id="app">
    <Computed />
  </div>
</template>

<script>

import Computed from './components/Computed.vue';

export default {
  components: {
    Computed
  }
}
</script>

There are lots of other features, Vue.js have. We will discuss in upcoming tutorials.

Vue cli Tutorial With Example From Scratch is over.

 

4 Comments
  1. Bernardo Llido says

    Good day!
    I would just like to ask.. after I ran the command ‘yarn add -g @vue/cli’ it says that ‘yarn is not recognized as an internal or external command,’
    operable program or batch file.

    May I know what’s wrong with this?

    1. Krunal says

      Please install yarn by npm install -g yarn

      1. Bernardo Llido says

        Thank you so much Krunal! You are awesome. You have answered my confusion.

      2. Bernardo Llido says

        Please do consider, if I will be back again for some queries and questions. I am just beginning studying vue.js.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.