General app structure

In this first part, we are going to create the project structure and learn more about routing and pages.

Setting up the project

For setting up the project, the following steps need to be followed:

1. First, generate a Vue project with the vue init webpack-simple <folder> command, like we did in Chapter 4, Advanced Project Setup:

      vue init webpack-simple support-center
      cd support-center
      npm install
      npm install --save babel-polyfill

2. Install the packages necessary to compile Stylus code (our style will be written using Stylus):

• stylus
• stylus-loader

      npm install --save-dev stylus stylus-loader

Note

Don't forget to save the development tools packages in the development dependencies of your package.json file with the --save-dev flag.

3. Remove the content of the src folder where we will put all the sources of our app.
4. Then create a main.js file with the code needed to create a Vue app:

      import 'babel-polyfill'
      import Vue from 'vue'

      new Vue...