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
