Start Building a Project in Vue.js

4 min readJul 20, 2020

Catch up from previous content

As previously stated, according to the official website [1], the Vue.js is a progressive and performant JavaScript framework used for building user interface (UIs) and front-end applications. Vue is one of the most popular JavaScript frameworks available and is steadily climbing. Using the framework like Vue.js keeps the project in order and much more organized.

Before Learning Vue.js

About coding in Vue.js, “The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript.” [2] After watching some tutorial videos on Vue Mastery (listed on the Vue.js official website) and others such as YouTube, I found out that it would better to review some of the JavaScript fundamentals first especially objects, arrays, conditionals etc. Topics include most recent version of module syntax; High order array methods such as forEach, map, filter; Arrow functions; Fetch API & promises.

Essential Concepts

Components

Basic component concepts can be found on the Vue.js official documentation on this topic here:

https://vuejs.org/v2/guide/components.html

Here the components are encapsulated, including the template as the output, the styling which we are familiar with, and the script with JavaScript code for functionalities.

Here is the anatomy of the component, three parts.

For output, the template tag, here the markup {{ msg }} allow the content to be displayed dynamically to the page.

In the script tag, the object with the name is exported.

And in the style tag, the scoped keyword indicates this style only applies to this particular component.

Everything is encapsulated, whis makes it easier to structure and debug the applications as the scale of the project escalates.

After installing the Vue.js project of which the process will be described later, the folder structure for src is like this:

The index.html is the page served in the browser. Vue.js is a single page application framework which loads one file — this index.html and the div here with the id of app is a place holder for the Vue application.

In the source folder, the main.js which imports the Vue, the main App component — App.vue is the main entry point to Vue.

The App.vue file is structured as any other components.

Set Up

There are multiple ways to set up the Vue.js project, depending on the scale.

CDN

For smaller scale projects and learning purpose, we can just include the piece of code in CDN(Content delivery network) section From the official website [2]:

As shown here inside of the script tag. In this way the Vue.js gets installed.

In the code here, a Vue instance which is the root of the Vue application is created.

In order to form a relationship between the Vue instance and part of the DOM, the property “el”, which stands for element, the “vue-app” here is going to connect to the div with the id of “vue-app” up there in the HTML, so that the Vue instance gets plug into that div.

In order to display the content, we use the double curly braces here, which is called expression.

So apparently, the output would be “Hello World”.

NPM

For larger scale projects, the alternative is to use the command line with NPM. (Node Package Manager, the package manager for JavaScript Programming language).

First of all, we need to have node.js downloaded from the official website.

After installing it, issue the command $npm install Vue.

For creating a Vue project, just issue the command “vue created XX(project name)” to the designated directory.

And here are some specific settings need to follow:

To test run the project, change directory into the project folder,

Issue command: $npm run server.

Then the command line will show the port number in localhost for this project.

And there is a better way for creating the project, Vue-CLI. And here is the official guide to it: https://cli.vuejs.org/

Simple Demo

So this app has three components: Home, About and Other, each represented by the corresponding vue file. Each of the component is independent, can hold its own data, methods, and can be interacting with each other (through props).