Overview

The egg-vue-webpack-boilerplate is a project skeleton based on Egg + Vue + Webpack that offers server-side rendering (SSR) and client-side rendering (CSR). It includes both a front-end system (SSR MPA) and a back-end management system (SSR SPA). The goal of this project is to provide a comprehensive framework for building web applications using the Egg, Vue, and Webpack technologies.

Features

• Server-side rendering (SSR): This project supports both SSR and CSR rendering modes, allowing for flexibility in choosing the rendering strategy.
• Multiple rendering templates: The egg-vue-webpack-boilerplate offers various templates such as MPA, SPA, asset rendering, HTML rendering, and TypeScript projects, allowing developers to choose the most suitable template for their needs.
• Automatic compilation and hot reloading: The project includes Webpack for automatic compilation and hot reloading, making the development process faster and more efficient.
• Support for Vue ecosystem: The egg-vue-webpack-boilerplate supports various Vue ecosystem libraries such as Vue-Router, Vuex, and Axios, enabling developers to build powerful single-page applications with ease.
• Resource dependency management: The project supports importing JavaScript, CSS, and image resources, with built-in support for CDN features. It also allows for writing styles in CSS, SASS, or LESS.
• Automatic Webpack entry creation: The project automatically creates Webpack entry files based on the .vue component files, reducing the manual configuration required.
• Multi-process and cache compilation: The project supports multi-process and cache compilation, reducing build times by up to 2/3 when combined with Webpack DLL auto-building.
• Asynchronous component loading: The project supports asynchronous loading of Vue components, improving performance by only loading components when needed.
• Fallback to CSR mode: In case of SSR failure, the project automatically falls back to CSR mode, ensuring a smooth user experience even in challenging situations.
• Internationalization (i18n) support: The project provides a solution for multi-language support using internationalization techniques.

Installation

To install the egg-vue-webpack-boilerplate, follow these steps:

1. Install the required dependencies:

npm install easywebpack ^5.0.0
npm install easywebpack-vue ^5.0.0
npm install egg-webpack ^5.0.0
npm install egg-view-vue-ssr ^3.0.0
npm install egg-webpack-vue ^3.0.0

2. Initialize the project using the easywebpack-cli:

npx easywebpack-cli init

3. Follow the prompts to select the desired template (e.g., egg-vue-webpack-boilerplate, egg-vue-webpack-mpa-boilerplate, etc.) and configure the project settings.

4. Start the application using the following command:

npm run dev

Summary

The egg-vue-webpack-boilerplate is a project skeleton that combines the power of Egg, Vue, and Webpack to offer server-side rendering (SSR) and client-side rendering (CSR) capabilities. It provides a wide range of features and templates, making it a versatile framework for building web applications. Whether you need a multi-page or single-page application, this project has you covered. It also supports various resource dependencies, automatic entry creation, and enhanced performance optimizations. Additionally, it includes internationalization support for creating multi-language applications. By following the installation guide, you can easily set up and start working on your project using this boilerplate.