# vue3前端基础模板

**Repository Path**: chadwickchen999/vue3-front-end-basic-template

## Basic Information

- **Project Name**: vue3前端基础模板
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-25
- **Last Updated**: 2026-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 漫剧 Web

基于 Vue3 的前端基础代码库，集成：

- Vue 3 + Vite + TypeScript
- Pinia 状态管理
- Vue Router 路由
- Axios 请求封装
- TailwindCSS 原子样式
- Ant Design Vue 组件库

## 快速开始

```bash
npm install
npm run dev
```

默认访问：<http://localhost:5173>

## 常用命令

```bash
npm run dev        # 本地开发
npm run build      # 类型检查并构建
npm run preview    # 预览构建产物
npm run typecheck  # 类型检查
```

## 目录结构

```text
src/
  api/         Axios 请求封装与接口模块
  components/ 通用组件
  router/     Vue Router 配置
  stores/     Pinia Store
  styles/     TailwindCSS 与全局样式
  views/      页面视图
```

## 环境变量

- `.env.development`：本地开发请求地址
- `.env.production`：生产环境请求地址

```env
VITE_API_BASE_URL=/api
```

## 工具类

已内置常用工具方法，统一从 `@/utils` 导入：

```ts
import { formatDate, formatNumber, storage, isMobile, debounce, copyText } from '@/utils'

formatDate(new Date())
formatNumber(123456)
storage.set('user', { name: 'Admin' })
isMobile('13800138000')
```

工具模块：

- `src/utils/storage.ts`：localStorage / sessionStorage 封装
- `src/utils/auth.ts`：Token 读写与登录状态判断
- `src/utils/date.ts`：日期格式化、是否今天、日期差
- `src/utils/format.ts`：数字、金额、百分比、手机号脱敏、文本截断
- `src/utils/validate.ts`：手机号、邮箱、URL、身份证、空值校验
- `src/utils/browser.ts`：复制文本、下载 Blob、URL 参数、标题设置
- `src/utils/object.ts`：pick、omit、sleep、debounce、throttle

## 已新增工程能力

### 登录与路由守卫

- 登录页：`src/views/LoginView.vue`
- 用户状态：`src/stores/user.ts`
- 路由守卫：`src/router/index.ts`
- Token 工具：`src/utils/auth.ts`

Demo 默认账号：`admin`，密码：`123456`。

### API 模块规范

```text
src/api/
  request.ts        Axios 实例、拦截器、401 处理
  types.ts          通用接口类型
  index.ts          统一导出
  modules/          业务接口模块
```

### Hooks

统一从 `@/hooks` 导入：

- `useLoading`
- `usePagination`
- `useRequest`
- `useModal`
- `useDebounce`
- `useClipboard`

### 代码规范

```bash
npm run lint
npm run format
npm run format:check
```

### 错误页面

- 通用错误页：`src/views/ErrorView.vue`
- 访问示例：`/error/403`、`/error/404`、`/error/500`
- 未匹配路由自动跳转：`/error/404`