# CommonTemplate

**Repository Path**: rawcloud/common-template

## Basic Information

- **Project Name**: CommonTemplate
- **Description**: 基于 Vue 2.x 的前端通用模板，集成了通用工具类、axios 二次封装、Element UI、vue-i18n 国际化、路由与状态管理、加密工具以及基础 webpack 配置等，可作为中后台管理系统项目的快速起步脚手架。
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-24
- **Last Updated**: 2026-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# CommonTemplate

[English](./README.en.md) | [中文](./README.md)

#### Description

A general-purpose front-end template based on Vue 2.x. It integrates common utility classes, a secondary wrapper for axios, Element UI, vue-i18n internationalization, routing and state management, encryption utilities, and basic webpack configuration. It can be used as a quick-start scaffold for middle-and-back-end management system projects.

#### Tech Stack

- **Framework**: Vue 2.6 + Vue Router 3 + Vuex 3
- **UI Library**: Element UI 2.15
- **Build Tool**: Vue CLI 4 (based on Webpack 4)
- **Internationalization**: vue-i18n 8
- **HTTP Client**: axios + secondary wrapper (`src/plugins/axios.js`)
- **Encryption**: jsencrypt / encryptlong (RSA long-text encryption)
- **Styling**: SCSS + postcss-px2rem (auto px-to-rem adaptation)
- **Others**: vue-pdf (PDF preview), vue-monoplasty-slide-verify (slide verification), vue-responsive-video-background-player (video background)

#### Software Architecture

General-purpose front-end code based on Vue 2.x, using the classic Vue CLI directory structure. It includes the following modules:

- **Base Framework**: Vue + Vue Router + Vuex stack
- **Request Layer**: Secondary axios wrapper with unified request interception (loading, token injection) and response interception (401 redirect to login)
- **Utility Layer**: session operations, date handling, form validation, rem adaptation, and common request helpers
- **View Layer**: Login, Home, About, 404, and system management (user/role management) example pages

#### Requirements

- Node.js (LTS version recommended, must be compatible with Webpack 4)
- npm or cnpm

#### Installation

1. Clone the repository
   ```bash
   git clone https://gitee.com/rawcloud/common-template.git
   ```
2. Enter the project directory
   ```bash
   cd common-template
   ```
3. Install dependencies (`vue-pdf` may print errors during installation in some environments — please follow [this commit guide](https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7) to fix it)
   ```bash
   npm i    # or cnpm i
   ```
4. Configure the backend address: change `url` in `public/conf.js` to your backend service URL.

#### Instructions

| Command | Description |
| --- | --- |
| `npm run serve` | Start the local dev server (opens the browser by default) |
| `npm run build` | Build for production (output to the `commonTemplate` directory) |
| `npm run lint` | Run ESLint code checking |

> Note: The `serve` / `build` / `lint` scripts are defined in `package.json` and powered by `vue-cli-service`.

#### Directory Structure

See [directoryList.md](./directoryList.md) for details. Core directories:

```
src/
├── api/                # API definitions (if any)
├── assets/             # Static assets (css, fonts, images, json data)
├── components/         # Common components (NavMenu, HelloWorld, etc.)
├── plugins/            # Plugins (axios wrapper, element registration)
├── router/             # Router configuration
├── store/              # Vuex state management
├── utils/              # Utilities (auth, dateUtil, rem, request, validate)
└── views/              # Page views (login, home, system management, etc.)
```

#### Common Configuration

- **Backend URL**: `url` in `public/conf.js`, used as the default axios `baseURL`.
- **Adaptation Base**: `remUnit: 16` in the `postcss-px2rem` config of `vue.config.js` must match the base value in `src/utils/rem.js`.
- **Path Aliases**: `@`, `assets`, `components`, `views`, `plugins`, `utils` are pre-configured.
- **Production Optimization**: gzip compression (`compression-webpack-plugin`) and `console` removal are enabled automatically in production.

#### Contribution

1. Fork the repository
2. Create a `Feat_xxx` branch
3. Commit your code
4. Create a Pull Request