beauty-vuejs-boilerplate

Real World Vue.js Boilerplate

This project is based on real-world practices and is ready to use, providing a solid foundation for Vue.js applications.

Features

• HTTP Request Class: Implements API calls with authentication and token refresh using Axios.
• Data Access Layer: Provides a structured approach to API interactions.
• Response and Error Handling: Includes response and error wrappers for robust API communication.
• Base Components: Offers common and layout components for consistent UI development.
• Helpful Mixins: Includes mixins for common tasks.
• Vue CLI v4: Utilizes Vue CLI v4 for project scaffolding and build processes.
• Supra API Compatibility: Developed to work seamlessly with https://github.com/zmts/supra-api-nodejs.

Project Structure

The project follows a modular structure:

• src - Contains the source code.
  • assets - Images, fonts, and other media.
  • components - Shared UI components.
  • config - Application configuration files.
  • directives - Custom Vue directives.
  • layout - Base layout components.
  • mixins - Reusable Vue mixins.
  • pages - Page-level components.
  • plugins - Vue plugins.
  • router - Vue Router configuration.
    • middlewares - Route middlewares for authentication and authorization.
    • util - Route utilities.
  • scss - SCSS files for styling.
  • services - API service classes.
    • util - Response and error handling utilities.
  • store - Vuex store modules.
  • .env.js - Environment variables.
  • main.js - Main application entry point.

Build Setup

# clone repo
git clone https://github.com/zmts/vuejs-boilerplate.git
 
# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run serve
 
# build for production with minification
npm run build