fc-angular

Admin template based on AntDesign and Angular8

English | 简体中文

一、简介

1、项目介绍

• 基于 angularV8，ng.ant.design V8.0.1 开发的后台管理系统
• 【码云在线预览-国内访问更快】http://perfect_l.gitee.io/fc-angular
• 【在线预览】https://fe-free.github.io/fc-angular/index.html
• 【源码地址】https://github.com/FE-free/fc-angular

预览效果图

2、 平台功能开发进度

• 登录(用户名、密码、验证码)
• 首页
• layout
• 多 tab 页路由复用策略
• 退出登录
• 修改密码
• 系统消息(侧边栏消息)
• UI 控件（Ant Design）
• 引入阿里图标库
• 清除本地缓存
• spreadjs 报表可视化
• aot 打包
• 模版页面（列表、表单、详情、树列表）
• iframe
• threejs

二、安装项目

• 在 git 、node、npm、vscode  配置好多前提下，克隆代码，命令如下：

git clone https://github.com/FE-free/fc-angular.git
npm install
npm start

• 在浏览器中输入  http://localhost:4200 ,项目启动成功, 在package.json 中可修改端口号。

三、开发代码

1、 代码规范

• 请按照 angular 官网提出的 风格指南  开发代码

【风格指南】https://angular.cn/guide/styleguide#prevent-re-import-of-the-core-module

2、 前后端通信

【 使用 httpclient】https://angular.cn/guide/http

四、aot 打包部署

通过    ng build --aot  命令生成 dist 文件，命令如下：

ng build --aot

五、代码目录结构

…

六、规范

1、 代码规范

• 请按照 angular 官网提出的 风格指南  开发代码

【风格指南】https://angular.cn/guide/styleguide#prevent-re-import-of-the-core-module

2、前后端通信

【 使用 httpclient】https://angular.cn/guide/http

七、aot 打包部署

• 通过    ng build --aot  命令生成 docs 文件，命令如下：

npm run aot

八、前端工程化

1、tslint

2、 stylelint

3、 commitlint

4、 changelog

• standard-version: 自动生成 CHANGELOG

5. travis

6. 使用 npm version 管理版本

• 官网：https://docs.npmjs.com/cli/version

九、学习帮助

• 【angular 官网】

• 【typescript 官网】

• 【ng.ant.design 官网】

• 【if 我是前端团队 Leader，怎么制定前端协作规范?】

• 【优雅的提交你的 Git Commit Message】

十、常见问题

1、 如何修改组件内部样式？

注意 由于 Angular 的样式隔离，修改 ant.design 组件内的样式 需要用::ng-deep 来覆盖 NgZorro 的样式

1. 打包如何优化？ 开启 aot 打包，输入以下命令

npm run aot

aot 打包时，优化编译时对 ts 语法检查非常严谨，如果有错误就一个一个的去改，直到错误修改完成，aot打包才能通过

Contributors

Thanks to everyone who contributed to the source code, comments, scripts, documentation, and test cases.

.prettierrc、.editorconfig 文件配置参考自 ng.ant.design 官方源码