Overview Of Vue.js

Introduction

In this article, we will learn about basic concepts of Vue.js and how to install Vue.js and create a new project.

What is Vue.js

Vue.js is an open-source front-end JavaScript framework for building user interfaces and single-page applications (SPAs). Vue.js is commonly referred to as Vue and pronounced as View.

As per official Vue.js documentation,

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. 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.

Vue was created by Evan You, who was working for Google.

Prerequisites

Basic knowledge of HTML and JavaScript.
Text editor.

Vue.js Installation

There are many ways to add Vue.js. We can install it from its official site or add using the CDN link. In this article, we will use CLI to install Vue.js and create a project.

Use the following command to install Vue.js CLI,

npm install -g @vue/cli

Check the version of installed Vue.js

Use the following command to check the version. You can check all required CLI commands from here,

vue --version

Introduction To Vue.js

Create Vue.js Project

To create a new vue.js project, use the following command,

vue create demoname

Introduction To Vue.js

Run the following command and select vue 3 preview and press enter,

Introduction To Vue.js

Now, open this project in visual studio code and run the project by using the following command,

npm run serve

Introduction To Vue.js

Now right click on the components folder and add a new file and named 'Home.vue', it creates a new component. Add the following code to this component.

<template>  
    <div>  
<h1>Welcome to Home Page</h1>  
    </div>  
</template>  
  
<script>  
    export default {  
        name:"Home"  
    }  
</script>  
<style lang="scss" scoped>  
</style>

Now open app.vue file and import the home component. Add following code in app.vue component.

<template>  
<Home/>  
</template>  
  
<script>  
import Home from './components/Home.vue'  
export default {  
  name: 'App',  
  components: {  
    Home  
  }  
}  
</script>  
<style>  
#app {  
  font-family: Avenir, Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style>

Now run the project and check.

Introduction To Vue.js

Install Bootstrap

To Install bootstrap use the following command,

npm install bootstrap-vue bootstrap --save

Now open the main.js file and import bootstrap reference.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Now right click on the Src folder > components folder and create a new component named 'About.vue'.and add the following code in this file.

<template>  
<div class="container">  
<button type="button" class="btn btn-primary">Primary</button>  
<button type="button" class="btn btn-secondary">Secondary</button>  
<button type="button" class="btn btn-success">Success</button>  
<button type="button" class="btn btn-info">Info</button>  
</div>  
</template>  
<script>  
    export default {  
        name:"About"  
          
    }  
</script>    
<style lang="scss" scoped>    
</style>

Now open app.vue file and import the About component. Add following code in app.vue component.

<template>  
<About/>  
</template>  
  
<script>  
import About from './components/About.vue'  
export default {  
  name: 'App',  
  components: {  
    About  
  }  
}  
</script>  
<style>  
#app {  
  font-family: Avenir, Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style>

Now run the project and check the result.

Summary

In this article, we learned basic concepts of Vue.js and how to install Vue.js and create a new project.