# Front End

**Repository Path**: yang-yi-li/FrontEnd

## Basic Information

- **Project Name**: Front End
- **Description**: ✨️前端：Front End✨️
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: FrontEnd
- **Homepage**: https://gitee.com/Anonymous-Programmers/FrontEnd
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-02-27
- **Last Updated**: 2023-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, uni-app, vue3, vite4, pinia2

## README

<div align="center">
<a href="https://gitee.com/Anonymous-Programmers/FrontEnd">
<img width="100" src="https://gitee.com/Anonymous-Programmers/BackEnd/raw/BackEnd/src/public/logo.png">
</a>
<br>
<h1>✨️Front End✨️</h1>
一个 TypeScript5 Vue3 Vite4 Pinia2 uni-app 工程化框架，用于构建高效且可扩展的多端应用程序。
<p align="center">
    <img src="https://img.shields.io/badge/-TypeScript 5.0.0-blue?logo=typescript&logoColor=white" />
    <img src="https://img.shields.io/badge/-Vue3.2-389988?logo=vue.js" />
    <img src="https://img.shields.io/badge/-Vite4-646cff?logo=vite&logoColor=white" />
    <img src="https://img.shields.io/badge/-Pinia2-yellow?logo=picpay&logoColor=white" />
    <img src="https://img.shields.io/badge/-uni_app-119900?logo=icon&logoColor=white" />
    <img src="https://gitee.com/Anonymous-Programmers/FrontEnd/badge/star.svg?theme=dark" />
    <img src="https://gitee.com/Anonymous-Programmers/FrontEnd/badge/fork.svg?theme=dark" />
</p>
</div>

## ☀️ 特性

-   **TypeScript5**: 应用程序级 JavaScript 的语言
-   **Vue3**: Vue3 框架
-   **Vite4**: Vite4 构建工具
-   **Pinia2**: Pinia2 状态管理
-   **uni-app**: uni-app 框架
-   **权限** 内置完善的动态路由权限生成方案
-   **组件** 二次封装了多个常用的组件
-   **Eslint/Prettier**: 规范代码格式,统一编码;
-   **路由拦截**: 基于 uni.addInterceptor 进行路由拦截;
-   **缓存加密**: 使用 AES 加密缓存,可设置区分在开发或生成环境中是否加密;
-   **请求拦截**: 核心使用 [luch-request](https://ext.dcloud.net.cn/plugin?id=392),支持请求和响应拦截等;

## 🌟 格式规则

所有命名格式： 驼峰命名

components 文件夹： 功能名 + Component

pages 文件夹： 功能名 + Page

enums 文件夹：功能名 + Enum; 放置枚举和常量

types 文件夹：自定义类型文件名加入前缀 My; 内部命名空间以同文件夹名称; 导出统一到 index.d.ts

utils 文件夹：放置方法

## 🌟 目录结构

```shell
.
├─ src
│   ├─assets # 静态资源目录
│   │
│   ├─components # 组件目录
│   │   ├─ BasicButton
│   │   │    ├─index.vue
│   │   │    └─prpos.ts
│   │   └─...
│   │
│   ├─enums # 枚举/常量
│   │   ├─ cacheEnum.ts
│   │   └─...
│   │
│   ├─pages # 页面
│   │   ├─ index
│   │   │    └─index.vue
│   │   └─...
│   │
│   ├─services # 接口相关
│   │   ├─ api # api
│   │   │    ├─auth.ts
│   │   │    └─...
│   │   │
│   │   └─ model # 数据模型
│   │        ├─authModel.d.ts
│   │        └─...
│   │
│   ├─settings # 设置
│   │   └─ encryptionSetting # 加密设置
│   │
│   ├─state # 状态管理模式(pinia)
│   │   ├─ modules # 数据模块
│   │   │    ├─auth.ts
│   │   │    └─...
│   │   │
│   │   └─ index.ts
│   │
│   ├─static # 静态公共文件
│   │   ├─ images # 图片
│   │   │    ├─avatar.png
│   │   │    └─...
│   │   │
│   │   └─ ...
│   │
│   ├─types # 类型文件
│   │   ├─ http.d.ts
│   │   └─ ...
│   │
│   └─utils # 工具类
│       ├─ cache # 缓存相关目录
│       ├─ http  # request相关目录
│       ├─ interceptors  # 拦截器相关目录
│       └─ ...
│
├─ .env
├─ .env.development
├─ .env.production
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ .prettierignore
├─ .prettierrc.js
├─ favicon.ico
├─ index.html
├─ package.json
├─ pnpm-lock.yaml
├─ README.md
├─ tree.txt
├─ tsconfig.json
└─ vite.config.ts

```

## 💡 前序准备

-   [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法
-   [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
-   [Vite4](https://vitejs.dev/) - 熟悉 vite 特性
-   [Pinia](https://pinia.vuejs.org/zh/) - 熟悉 pinia 特性
-   [uni-app](https://uniapp.dcloud.net.cn/) - 熟悉 uni-app 基本语法
-   [node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
-   [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
-   [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
-   [vue-element-plus-admin](https://gitee.com/kailong110120130/vue-element-plus-admin) - 框架参考

## 🛠 安装使用

-   获取代码

```bash
git clone https://gitee.com/Anonymous-Programmers/FrontEnd.git
```

-   安装依赖

```bash
cd FrontEnd

pnpm install

```

-   运行

```bash
pnpm dev:h5
```

-   打包

```bash
pnpm build:h5
```

-   更新依赖到最新（新手请忽略）

```bash
pnpm up
# 打开HBuilder X alpha桌面程序-->点击上面的帮助-->历次更新说明-->获取最新版本号（如：3.7.7.20230316-alpha）
npx @dcloudio/uvm 3.7.7.20230316-alpha
```

## ☕ 参与贡献

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

## 🔖 提交别名提示

1.  resolve a conflict：解决冲突
2.  merge branch：合并分支
3.  feat: [...] : 添加的新功能说明
4.  fix: [...] : 修复的 bug 说明
5.  initial project：初始化项目
6.  style: [...] : 修改的样式范围
7.  perf：[...] : 优化的范围
8.  release : 发布新版本
9.  docs: 文档修改
10. refactor： 代码重构
11. revert： 还原之前的版本
12. dependencies： 依赖项修改
13. devDependencies： 开发依赖修改
14. review：复习，回顾
15. strengthen: 加强，巩固