Edit our first VueJS app

Then it is now you have started the creation of your application, you launch your development environment via the command:


pierre@mypc:~/vuejs$  npm run dev

You see your index.html page displayed in your web browser ... we will be able to start!

Today we will learn how to modify the example page you have in front of you, this will give you a little introduction, we will go quickly on certain notions but do not worry if you do not understand everything, we will return to all the notions in this series of articles.

The code for the default page is in the index.html at the root, here it is:


<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>pierre</title>
 </head>
 <body>
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>
</html>

As you can see, we include javascript here because we launched the site directly via view-cli, we are in a development environment so no need to do it here but when you send it in production, do not forget to build your application before.

The javascript code of your page can be found in src/main.js


// 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: '#app',
 template: '<App/>',
 components: { App }
})

Here it load View and App.
Then your browser is told to create a VueJS instance represented by the div with the "app" identifier. It load the template and the VueJS "App" component in src/App.vue.

Define a component viewJS

Under VueJS each HTML element can be extended via component. That is, a component will be attached to an html element to "bring it to life". The component will allow you to define attributes and functions for your HTML element.

Import a component using the "import" function and pass it the path to the ".vue" file representing the component. In our example, the Hello component is in the src/components/ folder to import from src/App.vue the component Hello. So we do this:


import Hello from './components/Hello'

The App.vue file is composed of 3 parts, which you'll found for all our components:

- the “template” part:


<template>
 <div id="app">
   <img src="./assets/logo.png">
   <hello></hello>
 </div>
</template>

This is where we define the HTML content of our component. In our example, we display the logo and our component "hello" (imported before, we will define in the "script" part).

- The “script” part:


<script>
import Hello from './components/Hello'

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

This is where we define javascript code attached to our component.

In our example, we import the component "Hello" via "import", then we define the default application named "app". We will use the component "Hello" imported previously.

- The “style” part:


<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>

This is where we define, if desired, the css code used to format our application.

Edit our first page

Now that we understand how our first example page is built, let's change it!

Delete the logo

I go into my main.js file, I see that It call the App component on the #app div. I open my App.vue file.
I see that the logo is defined in the template part of this file, so I will comment it:


<template>
 <div id="app">
   <!-- <img src="./assets/logo.png"> -->
   <hello></hello>
 </div>
</template>

If i go on my exemple page http://localhost:8080/ on my web browser, I can now see my logo has been commented.

Edit the links

I now see that my App component calls a Hello component to display the rest of the content of my page, so I open the corresponding component in the file src/components/Hello.vue

I only have to modify the links between the tags .

Change the message by setting a new value for the variable

A variable is defined in the template via:


 {{ msg }}

123/5000 which means that its content is in the data() function of our script. So I can change the message like this:


<script>
export default {
 name: 'hello',
 data () {
   return {
     msg: 'My new message'
   }
 }
}
</script>

The message will then be modified. We will see in more detail in the next article how to define and use a variable with viewJS.

Prepare our files to send our work in production

To use it in production, we will not have nodejs installed on our server to interpret our code, and automatically retrieve the correct files. So we will have to define all the JS in the page or go to our javascript file.

We will start by "building" our project, to have our files in the folder /dist


pierre@mypc:~/vuejs$  npm run build

This command will export your application to the /remote folder at the root of your project, it will be well organized in the various files that compose it.

You now have a file : dist/index.html which is calling for all the necessary javascript in your page.


<script src=build/build.js></script>

<script type=text/javascript src=/static/js/vendor.fe8c964ae3f1d9265d0c.js></script>
<script type=text/javascript src=/static/js/app.e5adf3e401fe1b3a835b.js></script>

Your application now works perfectly in production.

This is the end of this tutorial, it may seem rather complicated at the moment but do not worry in the next lessons we will review every notions mentioned in more detail.

Books that can help you :

Article BackDiscovery and install of VueJS Next itemHelloworld tutorial with VueJS