How To Install Vue.js With Basic App Development?

by

 

Before starting let’s get acknowledged about AngularJS!

AngularJS allows us to work out every nice single page applications easily, particularly when we become well-versed with all the concepts. If we need to execute a single page application, it’s can be bit much to set up the important config, routing, components, services and more than makes up an Angular app.

Most of us look for something simple and easy to use.

For something lightweight, the Best Solution is Vue.js!!!

Vue is easy to use a format which can be really easy and smooth to work on. Vue.js is a JavaScript framework, which is versatile, approachable and easy to use. For Vue.js development, you are only required to have a basic knowledge of HTML, CSS, and JavaScript.

It is a progressive framework for building user interfaces. It’s library is focused on the view layers and is very easy to understand and integrate with other libraries or existing applications. In order to explain you in a better manner let me make you aware with some of the highlights of Vue:

  • Reactive Interfaces
  • Declarative Rendering
  • Data Binding
  • Directives
  • Template Logic
  • Components
  • Event Handling
  • Computed Properties
  • CSS Transitions and Animations
  • Filters

The Vue.js library is very small in size and ensures that your project greduces to minimal with its use and your website loading gets a fast pace.

How To Install Vue.js?

To use CDN, no need to install NPM.

To use Vue-cli, install Node Package Manager (NPM).

There are different ways to include Vue.js:

  • Add CDN by including tag in HTML file
  • Install using Node Package Manager (NPM)
  • Use Vue-cli to setup your project

Using Vue.js CDN

For thhis, create a HTML file. Let us suppose file name is myFirstApp.html.

Now in html file use below code for simple demonstration of Vue.js.

The output of this file show “Hello Vue!” in browser. In this example, Vue.js render data to the DOM using straightforward template syntax.

Using NPM

First install node.js and its installation on how to install node.js for different operating systems are as follows:

For Windows: https://nodejs.org/en/download/

For Ubuntu: https://nodejs.org/en/download/package-manager/

NPM is the beneficial installation method for large-scale Vue applications

After install nodejs, steps for installation process of Vue.js are as follows:

For local setup:
$ npm install vue

Using Vue-cli

To install Vue globally first, we need to install Vue-cli.
$ npm install -g vue-cli
Make sure that Node.js and the npm command is available on your system.

Second step to initiate a project:
$ vue init webpack firstapp

We’re telling Vue to initiate a new project and use the webpack template.
We can give the project name firstapp and execute the commands on the command line in the accompanying screenshot:

vue-cli

The project is created in the folder firstapp. Change into that registry with the accompanying command:
$ cd firstapp

Again start installing the dependencies by using npm:
$ npm install

Subsequent to finishing the establishment of hub bundles you can begin the server being developed mode by utilizing the accompanying command:
$ npm run dev

This will start the server on port 8080 and the application output will display in the browser automatically:

vue.js

On the off chance that you need to work for production, you can run the accompanying order:
$ npm run build

Vue.js Project Structure

Let’s take a look at the vuejs initial project structure which is available in folder:

vue.js project structure

In the project root folder, you can find files and folders. We should analyze the most vital ones.

Dependencies In Vue

The package.json files contain all the dependencies of your project. By using the command npm install, before we have made sure that the dependencies listed in package.json are installed into the node_modules folder of the project.

Structure of index.html contains the accompanying HTML code:

Vuejs

This index.html file is the starting point of Vue.js application and within the body element is available which has the id property set to string app. This component is utilized for the yield which is created by Vue.js.

Next, take a look at file main.js in the src folder. This file is used to Vue application initialization:

import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’

Vue.config.productionTip = false

new Vue({
el: ‘#app’,
router,
template: ”,
components: { App }
})

On top of file you can find three import statements

import Vue from ‘vue’: Vue is the main class of Vue.js framework

import App from ‘./App’ : App is the root component

import router from ‘./router’ : To map components to the routes

The new keyword created a new instance of the main framework. The constructor takes a question as a parameter which contains accompanying three properties:

  • el: By assigning the #app to this property we are defining that the output of the Vue application should be rendered to the element in index.html.
  • template: The template contains the HTML source code which is used to generate the output.
  • components: Vue.js components which are used in the template.

The template consists of only one element: <App/>, this is not a standard HTML element. This is the element which is assigned to App component. To use <App/> in the template the App component is also listed in the object which is assigned to the components property.

App.vue

Code structure of App component implementation in file App.vue:

As in each Vue.js single-document segment, the App usage is part up into accompanying three sections:

  • <template></template>: Component’s template code
  • <script >: Component’s script code
  • <style></style>: Component’ CSS code

The content segment is influencing a default to a fare of a protest declaring the segment named app. This subcomponent is utilized as a part of the layout code of an application and actualized in document hello.vue in folder components.

The execution of part Hello resembles the accompanying:

The segment setup question is traded as default. The part design question now established, contains an information strategy. This technique restores a question which speaks to the part’s model. Properties characterized in the model question can be utilized as a part of the segment’s layout by utilizing the addition sentence structure.

In the case of over the model, a protest has just a single property: msg. The string which is allocated to this property is incorporated into the segment’s layout by utilizing:
<h1>{{ msg }}</h1>

The interpolation syntax required twofold wavy props to incorporate model information in the format.

Utilizing Standard Directives

v-for

The v-for directive makes it possible to render an element multiple times based on data. One can utilize this order for emphasizing over an array and the cluster information to the output. To start with adding an array to the object which is returned by the information technique:

At that point utilize the v-for mandate to incorporate a rundown in the yield printing out the firstname and lastname estimation of each array element:

v-model

The v-model directive makes a two-route authoritative on an information component or a segment. Make a point to characterize a property in your data object which ought to be utilized as the coupling target:

v-model

Now, use the directive to bind a value of an input element to that property

v-model

With that binding setup we’re getting two impacts:

  • Every time user has to enter a value in an input field, estimation of input_val is refreshed.
  • If we change the value of input_val in our program, the esteem which is shown in the information component gets refreshed.

v-text

By utilizing the v-text directive the content substance of a component is set. We can utilize it as an option to the {{ … }} syntax if the entire content substance ought to be set. An example we can use this directive to output the input_val value to the user:

v-text

Summary

The complete code of the adjusted Hello component execution should now resemble the accompanying:

vue

The outcome can be found in the accompanying screenshot:

Vue Basic App

Isn’t it easy? Just follow the simple steps and you are done!

Latest posts by shobhnat (see all)

3 thoughts on “How To Install Vue.js With Basic App Development?”

Leave a Reply to ปั้มไลค์ Cancel reply