# admin-angular

**Repository Path**: baoyinYang/admin-angular

## Basic Information

- **Project Name**: admin-angular
- **Description**: angular12 + antd + 自定义webpack配置 + mockapi + echarts + 高德地图的一个简单admin的例子。记录了每一次较大变动的信息。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 4
- **Created**: 2021-08-25
- **Last Updated**: 2023-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Angular, TypeScript, JavaScript

## README

## admin-angular

### 项目运行

* `npm i` 或者 `yarn` 进行依赖安装

* `npm start` 或者 `yarn start` 进行项目启动

### 项目构建

* `npm run build` 或者 `yarn build`

### 代码风格检测

* `npm run lint` 或者 `yarn lint`

### 项目正常运行前提

* 使用高德地图的话，需要自行申请高德地图的web对应的apikey，配置在config.ts中

### 项目开发记录

* [ng全局安装](./doc/1.add-ng.md)

* [项目创建](./doc/2.ng-new.md)

* [添加ng-zorro-antd](./doc/3.add-zorro.md)

* [自定义webpack配置](./doc/4.webpack-config.md)

* [添加translate国际化转化](./doc/5.add-translate.md)

* [添加typescript-eslint](./doc/6.ts-eslint.md)

* [添加echarts](./doc/7.add-echarts.md)

* [添加支出模块页面](./doc/8.outlay-module.md)

* [添加高德地图](./doc/9.add-gd-map.md)

* [添加富文本编辑器](./doc/10.add-text-edit.md)

### 目录简介

```json
|- doc -------------------------------------- 一些说明文档
|- mock ------------------------------------- apimock文件
      json ---------------------------------- mockapi的数据文件-json格式。
      utils --------------------------------- mock中封装的一些小工具
      api.js -------------------------------- mock的入口文件
      config.js ----------------------------- mock配置文件
      menu.js ------------------------------- 菜单api文件
|- node_modules ----------------------------- npm依赖包
|- src -------------------------------------- 前端项目代码
      app ----------------------------------- 代码目录
        models ------------------------------ 定义的一些类型
        pages ------------------------------- 页面
            auth ---------------------------- 权限模块-包括登录、注册、密码找回
            dashboard ----------------------- 业务模块-登录之后的路由页面、页面中需要的组件
        service ----------------------------- 服务的集合-api和其他service
        app-routing.module.ts --------------- 路由页面的配置
        app.component.ts -------------------- 根组件app
        app.module.ts ----------------------- 根模块app
      assets -------------------------------- 资源目录
      environments -------------------------- 环境配置
      styles.scss --------------------------- 全局样式文件
      theme.less ---------------------------- antd主题设置文件
|- .eslintrc.js ----------------------------- eslint检查配置
|- .gitignore ------------------------------- 项目忽略文件配置
|- angular.json ----------------------------- angular提供的项目配置文件
|- config.ts -------------------------------- 项目本身需要的配置
|- package.json ----------------------------- 依赖包管理文件
|- webpack.config.js ------------------------ webpack配置文件
```

### 运行截图

![首页](./doc/imgs/0.home01.png)

![支出](./doc/imgs/0.home02.jpg)

![支出英文](./doc/imgs/0.home03.jpg)

![地图](./doc/imgs/0.home04.jpg)

![文本编辑器](./doc/imgs/0.home05.jpg)