Fleet Frontend

Installation

  1. Make sure that your machine has node.js ( version 10 or greater ) and vue-cli ( latest version 3 ) has installed.

  2. After successfully installed both package go to front-end folder and in command prompt type npm run serve this will open the project in browser. this is to only make sure the project is working fine.

  3. .env files holds the API and deployment path configurations which are needed to make the application work, you can modify the values of VUE_APP_API and VUE_APP_PATH.

    Note : Do not modify the name of variables e.g. VUE_APP_API, only change it's values else it will not work. and you must specify the VUE_APP_PATH if you are deploying it in the sub directory else you can leave it as it is.

  1. Now, to finally to build the project open folder and in command prompt type npm run build .
  2. it will then build the project and will put the built files in /dist directory.
  3. you will have to deploy all the files inside it into your server to make the application work.

 

Documentation

 

Directory structure

All the project files are stored in /src folder.

  1. /assets : it holds all the static assets of the project which contains font-icon files , images and global scss file.

  2. /components : it holds the ui components which are used in the application

    1. /pages : it contains all the page specific components.
    2. /ui : it contains the global elements which are used in the application.

  3. /mixins : holds the mixing file for the vue.js mixins.

  4. /store : It holds the VueX store.js file which handles the data which is used globally in application.

  5. /api.js : this file holds the configuration parameters.

  6. /globalComponents.js : it holds the global definition of some components so they are not needed to declare separately when we need it.

  7. /routes.js : it holds the router and paths configuration.

  8. /auth.js : it holds the authentication function for login / logout.

  9. vendor.js : it holds all the third party libraries used in the application.

 

Working with API.

We used axios module as our api support library.

Each Components holds its own logic and every API call are made in their corresponding component. You can easily modify it in the component.

Some api calls are made in vueX store ( store.js file ) as we need to access it in multiple components which is made easier by doing so.

We have included full API documentation in the separate file which you can check out.

 

Styling

In our application we mostly used scoped css for better management and one single global scss file which we included globally because it holds the font / color etc basic default styles.

In some components we had to use global styling ( not scoped ) to make sure it applies to third party library based components.