Once the code generation is finished and all the dependencies are also installed, you can see the following structure in the front-end directory:
.
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── jest.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.js
│ ├── router.js
│ ├── store.js
│ └── views
│ ├── About.vue
│ └── Home.vue
└── tests
├── e2e
│ ├── custom-assertions
│ │ └── elementCount.js
│ └── specs
│ └── test.js
└── unit
├── .eslintrc.js
└── HelloWorld.spec.js
Before we go through each item in this structure, let's switch to the front-end directory and run the command, npm run serve, to start the Vue application. Behind the scenes, this command calls vue-cli-service serve to start a dev server, which is based on webpack-dev-server, to serve our Vue application with Hot-Module-Replacement (HMR) working out of the box. Figure 8.5 is how our generated Vue application looks. It is a placeholder page that we will change later:
Now, let's go through the items in the structure one by one. .browserslistrc is used by libraries such as Babel and postcss-preset-env to define the target browser. .eslintrc.js is the configuration file of ESLint. babel.config.js is the configuration file of Babel. jest.config.js is the configuration file of Jest. And the package-lock.json file is automatically generated by npm for describing the exact node_modules tree that was generated so that subsequent installs are able to generate identical trees. The postcss.config.js file is used to autoload configuration for PostCSS (https://postcss.org).
The public directory contains the favicon.ico file and the index.html file, which is the template file of the final generated index.html file served by webpack-dev-server, as shown in Figure 8.6. Let's take a closer look to see the difference. The following is the content of the index.html template file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-
scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>front-end</title>
</head>
<body>
<noscript>
<strong>We're sorry but front-end doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Figure 8.6 shows the source code of index.html that is served by webpack-dev-server:
As you can see, in line 7, <%= BASE_URL %> is replaced with the / value. And, line 9 and line 16 are auto-injected by webpack. The app.js file is generated by webpack on the fly.
Let's change <title> in the index.html template to <title>TaskAgile</title>. And, without refreshing the page, the page title has been updated automatically.
The src directory is where we will put the source code of our Vue application. Inside the src directory, the assets directory is where we put assets that will be processed by webpack. The components directory is where we put our shareable components. App.vue is the main Vue component of our application that is bootstrapped in main.js, which is the application's entry file. And the router.js file contains the configuration of vue-router, which we will discuss later in this chapter. The store.js file is for bootstrapping Vuex, which we will introduce in Chapter 11, State Management and i18n - Building a Home Page. The views directory is where we put the pages.
The test directory contains two types of test code: end-to-end tests and unit tests, which are kept in the e2e subfolder and unit subfolder respectively. And there are test examples included in the generated code. We can try with the commands, npm run test:unit and npm run test:e2e, to see the execution.
Let's make the following change to scripts and to package.json by adding the test command so that we can use one single command, npm test, to run both the unit test and the E2E test:
{
...
"scripts": {
...
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"test": "npm run test:unit && npm run test:e2e"
},
...
}