Creating the frontend scaffold

To create the frontend scaffold, we will use Vue.js's command line, vue-cli, to generate the code for us. First of all, let's install vue-cli with the following commands:

npm install -g @vue/cli

At the time of writing, the version of vue-cli we used here is 3.0.1. 

Once vue-cli is installed, we can use its create command to generate the code. Let's create a Vue application called front-end under the root directory of the application by using the following command:

vue create front-end

And, in the prompt shown in Figure 8.4, we choose to manually select the following features: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, and E2E.

We enable the history mode for the router and choose SCSS/SASS as the CSS pre-processor. For Linter, we choose the ESLint + Standard configuration. And, we choose Jest as the unit testing solution and Nightwatch as the E2E testing solution. And, we choose NPM for package managing:

Figure 8.4: Vue CLI where manually selecting features...