The Vue JS basic questions and folder structures

Vue JS now gaining popularity these days. It seems the structure can be understood easily by experienced programmers and for beginners alike. Official documentation and video tutorials are widely available. I guarantee as a user of this software, that it is robust and easy to setup. One thing programmers really like is that there is not much repeated codes and structure is nearly basic.

In this write-up , I will answer some basic Vue JS questions.

1. How is Vue JS used in a website?

In my experience, Vue JS is used as a front web platform. It can contain pages, static image files and Javascript codes. It is a separate front-web application and will need backend application for it to run on. It can go with any backend such as ( Java or etc… ) with REST and JSON interfaces. Here is an article below that talks about Vue JS compatible backend applications.

https://vuejsdevelopers.com/2018/05/07/vue-js-backends-express-laravel-firebase-wordpress-django-rails/

2. What is _id.vue file?

Basically it means a dynamic page that can be accessed by a matching ID. For example, in the Vue folder structure, the file folders would be project/web/student/_id.vue then in the website URL it would correspond to http://www.example.com/student/345624, where 345624 would be the student ID, and the page displays a student information like photo, name, age etc. This would be the most basic explanation.

3. What are process.env variables?

These are simply variable from the property files. It comes in these examples such as process.env.schoolName or process.env.officeName. Then in the env files, this would correspond to SCHOOL_NAME and OFFICE_NAME properties respectively. These would be the property keys and it would contain a constant value. Configuration/Property files called env can then be set for each development environment, such as Beta, Stage, Pre-Production and Production.

4. Which is better to use, Vue JS or Angular JS

Based on my experience, and you may find similar ones written in the internet too, Vue JS is much easier to learn. Although you need to have some Javascirpt, HTML and CSS skills before you can start. Angular JS has a way higher learning curve since it is a more complex language. I remember you need to get a UI engineer with a high experience on Angular JS to fully build an good Angular JS code. Good thing about Angular JS is that it is a highly efficient software used once it has been mastered and can do so many UI magic. 

Vue JS, on the other hand, deals more of the basic web page structuring, and solves the page navigation and code structure in a more simpler way. The only learning curve is how to understand the Vue structure and other Javascript syntax for Vue, while as for Angular JS, you need to learn the whole Angular engine and object oriented concept to fully use it. 

Below are some references I read to understand Vue JS

Here is the basics of the Vue Components folders

Structuring Vue Components

This one describes about the dynamic matching of pages using the _id.vue file

https://router.vuejs.org/guide/essentials/dynamic-matching.html

Here is one video that describes using the ID in Vue JS

https://vueschool.io/lessons/nuxtjs-dynamic-routes?friend=nuxt

Leave a comment