Helloworld tutorial with VueJS

Today we are going to create our first VueJS app from scratch, to make the traditional "Hello World". We will push a little more than a simple Hello World to approach some basic concepts of VueJS to allow you to take charge this beautiful javascript framework very quickly.
The first step is to create your project:


pierre@mypc:~/vuejs$ vue init webpack pierre

  This will install Vue 2.x version of the template.
  For Vue 1.x use: vue init webpack#1.0 pierre
? Project name pierre
? Project description A Vue.js project
? Author pierre <pierrefay@myemail.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "pierre".
   To get started:
     cd pierre
     npm install
     npm run dev
     
Documentation can be found at https://vuejs-templates.github.io/webpack

pierre@mypc:~/vuejs$ cd pierre
pierre@mypc:~/vuejs$ npm install

Then launch the development environment:


pierre@mypc:~/vuejs$  npm run dev

Then delete all the contents of the src/ folder and you are now ready to start!

Step 1: Create the HTML page of our JS application

The first step is to create a html file that will contain a div with a specific ID attribute which let you tell your JS view: "you will replace this div with my JS app". Edit the index.html file like this:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My HelloWorld vueJS</title>
  </head>
  <body>
    <div id="myApplication"></div>
  </body>
</html>

Here we created an HTML page which contains only one div with the ID "myApplication".

Step 2: Declare our VueJS app

By default, the development environment will take the file src/main.js as input to create our application. We will create the file main.js like this:


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#myApplication',
  template: '<App/>',
  components: { App }
})

Small explanation:

In this file, we imported the View and App classes to be able to use them in the rest of the script.

Then We create our Vue object by passing it in parameter:
- el: the identifier of the element containing our application
- template: the contents of the div, here we put a tag <App /> ie the component "App" that is declared just below. we will defined a template which will replace this tag <App /> .
- component: the View component (ie the .vue file) which will contain 3 parts: logical code, template, css style.

Step 3: Create our App component

A VueJS component is represented by a file ".vue" with the name of its component (here App therefore the file will be called "App.vue").

In this step we will declare our component App to be our only component for our helloworld vueJS.

This component consists of 3 parts contained in tags:
- template: contains the code to display instead of the <App /> tag
- script: contains the javascript code, it is here that we will insert the "logic" of our component.
- style: not required, but always practical if you want to define a particular css style for your element.

So create the file /src/App.vue like this:


<template>
  <div id="myApplication">
    <h1>Hello World</h1>
    <p>little text behind the title</p>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

You should now see your Hello World displayed on your page ! Congratulations ! You can download the code of this tutorial via the links just below this article. We will start from the code of this article in the next tutorials.

Available documents for this article :

Source code

Books that can help you :

Article BackEdit our first VueJS app Next itemVariables and Properties under VueJS