Greetings Steemian, as I mentioned in my first post I bring my first post related to programming, this time I will start with a great library "Vuejs" for me one of the best (for now).

What is Vue.js

Vue is a progressive JavaScript framework that focuses on building user interfaces. It only works in the "view layer", that is why it does not assume the middleware and the back-end, so it can be easily integrated into other projects and libraries. Vue.js offers a large number of functionalities for the visualization layer and can be used to create powerful single-page applications. Below you can find a list of features:

1. IReactive interfaces
2. Declarative representation
3. Data link
4. Directives
5. Components
6. Event management

Another great feature is that Vue.js 2 is very light (17 kB). This ensures that the overhead that is added to your project through Vue.js is minimal and your website loads quickly.

How to use Vue.js

There are different ways to include Vue.js in our web project:

1. CDN including the tag (script) in the HTML file
2. Install using Node Package Manager (NPM)
3. Install using Bower
4. Use Vue-cli to configure your project

Next, we will use Vue-cli to configure a new project and install the Vue.js 2 library.

Using Vue-cli

First, we need to install Vue-cli. It is available as an NPM package. Make sure that Node.js and the npm command are available on your system and use the following command to install the Vue CLI globally on your local system:
$ npm install -g vue-cli

Now that we have the client installed, the vue command will be available. We can start a project using this command as follows:

$ vue init webpack vueapp01

We are telling you to start a new project and use the web package template. We also give the project the name vueapp01.

The project is created in the vueapp01 folder. Change to that directory with the following command:

$ cd vueapp01

Start installing the dependencies using npm again:

$ npm install

After completing the installation of the packages, you can start the web server in development mode using npm as follows:

$ npm run dev

This will start the server on port 8080 and the output of the application is displayed in the browser automatically:

Later, if you want to build for production, you can use the following command. In this case, a dist folder containing the necessary files for a productive implementation is created.

$ npm run build

Structure of the project

Let's take a look at the initial project structure that is available in the vueapp01 folder:

In the root folder of the project you can find files and folders. Let's examine the most important ones. The package.json files contain all the dependencies of your project. By using the npm installators command, we have made sure that the dependencies listed in package.json are installed in the node_modules folder of the project.
The index.html file contains the following HTML code:

This file is the starting point of your application. Keep in mind that inside the body section

An element that has the id property configured for the string application is available. This element is used as a placeholder for the output generated by Vue.js.
Next, take a look at the main.js file in the src folder. That's where the Vue application is initialized:

At the top of the file, you can find two import instructions: import Vue from 'vue': Vue is the main class of the framework import App from './App': The application is the root component of our application
When using the new keyword, a new instance of the main frame class Vue is created. The constructor takes an object as a parameter that contains three properties:
el: By assigning the string #app to this property, we are defining that the output of the Vue application must be represented by in index.html.
template: The template contains the HTML code that is used to generate the result of the Vue.js. application.
components: List of Vue.js components that are used in the template.

The template is only composed of one element: <App/> . Of course, this is not a standard HTML element. This is the element that is assigned to the application component. In order to use<App/> in the template, the application component is also listed in the object that is assigned to the component property.

So, let's see what is inside the implementation of the application component in the App.vue file:


As with each single file component of Vue.js 2, the implementation of the application is divided into three parts:
<template> </template>: component template code
<script> </script>: component script code
<style> </style>: component CSS code
Let's focus on the template and script of the first two sections. The section of the script performs a default export of an object that declares the component named application. Again, ownership of the components is used to declare that the application requires another component (Hello). This subcomponent is used in the code of the application template and is implemented in the hello.vue file in the components of the folder. To use the Hello component in the application, it is also necessary to include the corresponding import declaration at the top of the section of the script.

The Hello component implementation looks like this:

The component configuration object is exported by default. This time, the component configuration object contains a data method. This method returns an object that represents the model of the component. The properties defined in the model object can be used in the component template using the interpolation syntax. In the previous example, the model object has only one property: msg. The string that is assigned to this property is included in the component template using:

<h1> {{msg}} </ h1>

The result can be seen in the following screenshot:

That's all for today, I hope you could start your server with vuejs.
Anything do not hesitate to ask. Greetings.

Source

---

Posted on Utopian.io - Rewarding Open Source Contributors

---