Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

App.vue: You can think of App.vue as the main component for

rendering the view files. Other files will extend the layout defined

on this file to create different views.

main.js: This is the main entry point for any Vue.js application.

Static: You can use this folder as well to keep your static files, such as CSS and

images.

Test: This folder will be used to handle all the tests written for our application.

Building a static application with Vue.js

Now that we have initialized a project, let's move ahead with creating a static web
application. Don't forget to make a repository on GitHub and commit and push changes

regularly.

When you visit the URL http://localhost:8080/#/, you will see a default page

rendered. This piece of code is written in src/components/HelloWorld.vue.

If you look into build/webpack.base.conf.js, you will see this line of code in

the module.exports section:

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js'

},

output: {

This means, when you run the app, this main.js will be the entry point for the app.

Everything will start from there. Let's have a quick look at that main.js file inside src:

// 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';

import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */

new Vue({

el: '#app',