Vue.js for Beginner / Pour débutants (Part. 3) ✔️ | 2019 | EN/FR 😎

7 min readAug 8, 2019

Part. 3 : Application tree and first component

Let’s start with our ./node_modules folder.
If you do not have this folder, it is because you did not launch the command “npm install” to install the depedences of your project. This command will actually fetch the dependencies listed in your “package.json” file to install them in your application. The source files for these dependencies are all in the node_modules folder.

I advise you to open it for now because:
- This folder is extremely heavy
- The code is not normally very readable

Then we find the folder “public”, in this one you will find the favicon.ico (it is the icon of your site, the one which appears in the tab of your navigator) as well as the page index.html . This page is very interesting it is in this file that will be injected files and assets of your application during the build.
However, we find all the good things of a classic HTML page : charset, browser compatibility, viewport with scale, and the Title of your page. It’s not for nothing that we call this kind of “Single Page Application” (SPA) technology because at the end you end up with a single HTML page for your entire application.

Source Folder (./src)

It is in this file that we will work in large majority.
We create 3 main types of elements:
- Assets: Images, Writing fonts
- thibault60000@gmail.com: The main pages of the site (the parts that enclose, more often called “Layout”)
- Components: Which will be included in the views, or in other components. Unlike the view, they do not define the page but allow to feed it, a component will be reusable to infinity, and as small as possible

In addition to these three folders (./src/assets, ./src/components, ./src/views), we find 4 files among the most important of our application:

App.vue

(I realize by opening it that I forgot to install the plugin Vetur to read it correctly, thank you VSCode to help us in this process by notifying us 😇 )

App.vue is as its name indicates a file Vue.js (thus a component), we will return on the syntax of the .vue file at the end of this part. Just be aware that this is the highest level component of our application, the component that will encompass all other components.

main.js

We know that the App.vue file is the enclosing component, but where is it defined?
It is quite simple, it is defined in our main.js file which is the main file of our application. It is thanks to this file that our application exists. In this file we create what we call a “Instance of Vue.js”, to make it simple, we import Vue.js and we create a new element “Vue” with the syntax javascript:

new vue ()

Then we say to “mount” this instance of Vue.js in the HTML tag that contains the ID #app (this tag is in our file index.html), by pretending to render our component App.vue that we just saw before. This is the

npm run serve

command that will execute this main.js file

We now know where and how our application starts!

It is also in this main.js file that we will find all the libraries that we import. We will never forget to add them to our instance of Vue so that these libraries can be transmitted to all components of our application.

Here we can see that when we installed VUEX and Vue-Router, the main.js file was modified by adding 2 imports : the Router and the store (vuex) in the declaration of the instance of vue.

If we follow these imports we can see that they are also in the folder ./src

Router

It is here that we will declare our routes (URL) we can for example quickly see (without much on the syntax for the moment) that if we go on the URL “/” we are redirected to the home page then that if we go on “/about” we will be redirected to the page about

We can also see the option named “mode: history” that we accepted when creating the project. We will come back to that.

Be aware however that there are 2 ways to declare the component that will be executed during the change of route (url):
- classic import as for Home
- the import in “Lazy Loaded” as for the component About (the import is done via an arrow function directly in the object route). I invite you to find out about this way of displaying content: https://en.wikipedia.org/wiki/Lazy_loading

Store

As its name suggests it allows to declare the global store of our application. It is thanks to him that we will be able to add communicate with all our components and make changes of state

For now there is only the import of “vuex” and the declaration of a new store object:

new Vuex.store ()

If you do not know what it is, the .gitignore file is used to define the files / folders that will be ignored by git and therefore not send online (such as the dependency directory node_modules which is quite heavy and which can install) or log files or environment variables

The babel.config.js file is the configuration of “babel”
Be aware that the code you write is understood by most browsers while most of them do not understand it. This is normal because your code is TRANSLATED (compilated). Babel will transform your code to make it readable by all browsers.

The package.json is already seen, the package-lock.json simply lists the dependencies installed, and the file README.md (Markdown file) is a help file. It appears first on your Github so users can understand how your code works.

For example, the following code :

<img src=”./image.png”>

He is to interpret like this:

h(‘img’, { attrs: { src: require(‘./image.png’) }})

Choose your pre-processor:npm install -D sass-loader sass
npm install -D less-loader less
npm install -D stylus-loader stylusAnd use it : <style lang=”scss”>
  $color: red;
</style>

Official Documentation here :

https://cli.vuejs.org/guide/css.html#css-modules

Créons notre premier composant, pour cela allez dans le dossier ./src/components faites un clic droit et créez un nouveau fichier, nommez le par exemple : “FirstComponent.vue”

A partir de là c’est assez simple, un composant Vue ne dispose que de 3 éléments (balises):

Template (html)
Script (javascript)
Style (css)

Let’s create these three tags and initialize them because it’s pretty ugly empty. (Please note that for the template we can not have 2 first level tags, we must necessarily include them)
Thanks to the extensions, VS Code proposes me the syntax directly after having typed only “<scri” I click on what one proposes to me and it is exactly what I wanted, a tag script with an export default inside, we will always have this syntax.

You can leave the empty Style tag

And here we have our first component! If you want to call it, you have to declare it in the router, take inspiration from the existing one, here is what I did: