# 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)

#### 介绍

基于 Vue 2.x 的前端通用模板，集成了通用工具类、axios 二次封装、Element UI、vue-i18n 国际化、路由与状态管理、加密工具以及基础 webpack 配置等，可作为中后台管理系统项目的快速起步脚手架。

#### 技术栈

- **框架**：Vue 2.6 + Vue Router 3 + Vuex 3
- **UI 组件库**：Element UI 2.15
- **构建工具**：Vue CLI 4（基于 Webpack 4）
- **国际化**：vue-i18n 8
- **HTTP 请求**：axios + 二次封装（`src/plugins/axios.js`）
- **加密**：jsencrypt / encryptlong（RSA 长文本加密）
- **样式**：SCSS + postcss-px2rem（px 自动转 rem 适配）
- **其他**：vue-pdf（PDF 预览）、vue-monoplasty-slide-verify（滑动验证码）、vue-responsive-video-background-player（视频背景）

#### 软件架构

基于 Vue 2.x 的前端通用代码，采用经典的 Vue CLI 目录结构，包含以下模块：

- **基础框架**：Vue + Vue Router + Vuex 全家桶
- **请求层**：axios 二次封装，统一处理请求拦截（loading、token 注入）、响应拦截（401 跳登录）
- **工具层**：session 操作、日期处理、表单校验、rem 适配、通用请求封装
- **视图层**：登录、首页、关于、404 以及系统管理（用户/角色管理）示例页面

#### 环境要求

- Node.js（建议 LTS 版本，需兼容 Webpack 4）
- npm 或 cnpm

#### 安装教程

1. 克隆仓库
   ```bash
   git clone https://gitee.com/rawcloud/common-template.git
   ```
2. 进入项目目录
   ```bash
   cd common-template
   ```
3. 安装依赖（`vue-pdf` 在某些环境下安装会打印异常，请参考 [该 commit 指引](https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7) 修改即可）
   ```bash
   npm i    # 或 cnpm i
   ```
4. 配置后端地址：修改 `public/conf.js` 中的 `url` 为你的后端服务地址。

#### 使用说明

| 命令 | 说明 |
| --- | --- |
| `npm run serve` | 启动本地开发服务器（默认自动打开浏览器） |
| `npm run build` | 打包构建生产环境代码（输出至 `commonTemplate` 目录） |
| `npm run lint` | 执行 ESLint 代码检查 |

> 说明：`serve` / `build` / `lint` 脚本定义在 `package.json` 中，底层由 `vue-cli-service` 驱动。

#### 目录结构

详见 [directoryList.md](./directoryList.md)，核心目录说明如下：

```
src/
├── api/                # 接口定义（如有）
├── assets/             # 静态资源（css、字体、图片、json 数据）
├── components/         # 公共组件（NavMenu、HelloWorld 等）
├── plugins/            # 插件（axios 二次封装、element 注册）
├── router/             # 路由配置
├── store/              # Vuex 状态管理
├── utils/              # 通用工具（auth、dateUtil、rem、request、validate）
└── views/              # 页面视图（登录、首页、系统管理等）
```

#### 常用配置说明

- **后端地址**：`public/conf.js` 中的 `url`，axios 默认的 `baseURL`。
- **适配基准**：`vue.config.js` 中 `postcss-px2rem` 的 `remUnit: 16`，需与 `src/utils/rem.js` 中的基准值保持一致。
- **路径别名**：已配置 `@`、`assets`、`components`、`views`、`plugins`、`utils` 等别名。
- **生产优化**：生产环境自动开启 gzip 压缩（`compression-webpack-plugin`），并移除 `console`。

#### 参与贡献

1. Fork 本仓库
2. 新建 `Feat_xxx` 分支
3. 提交代码
4. 新建 Pull Request