NiceFish（美人鱼）
前端有 3 个版本：
- 浏览器环境
- 移动端环境
- Electron 环境
服务端有 2 个版本：
- SpringBoot 版本（已实现基于 Apache Shiro 的 RBAC 权限控制）
- SpringCloud 版本
1.主要依赖
| 名称 | 版本 | 描述 |
|---|---|---|
| Angular | 16.2.0 | Angular 核心库。 |
| PrimeNG | 16.2.0 | 开源组件库。 |
| Bootstrap | 5.2.3 | 响应式布局。 |
| ngx-bootstrap | 11.0.2 | 基于 Bootstrap 的开源组件库。 |
| echarts | 5.4.2 | 来自百度的图形库。 |
| ngx-echarts | 15.0.3 | 基于 echarts 封装的 Angular 组件库。 |
| ckeditor5-angular | 5.2.0 | 富文本编辑器。 |
| font-awesome | 4.7.0 | 开源图标库。 |
注意：为了防止出现 NodeJS 模块兼容性问题，本项目在 package.json 中锁定了所有 Node 模块版本。如有需要，您可以自己测试兼容版本号（不建议这样做，因为会消耗掉大量的时间）。
2.启动项目
打开终端，依次执行以下命令：
git clone https://gitee.com/mumu-osc/NiceFish.git
cd NiceFish
npm i -g @angular/cli
npm i
ng serve
打开浏览器，访问 http://localhost:4200/
🚀🚀🚀 中文开发者：网络原因，推荐安装 nrm 来管理 npm 的 registry。
npm i -g nrm
nrm use taobao
这时候用 npm 安装 node 模块就会使用 taobao 提供的 registry 了。
3.在 Mock 版本和带服务端版本之间切换
为了方便前后端分离开发，本项目提供 2 种启动模式：
- 带 mock 数据的启动模式：ng serve --configuration development-mock （或者直接 ng serve 启动，默认是 mock 模式），所有 mock 数据都在 src/mock-data 目录中，json 格式，与服务端接口返回的数据格式保持一致。
- 访问真实的服务端接口的启动模式： ng serve --configuration development-backend （使用此模式启动需要有真实的服务端，把 proxy.config.json 中的服务端地址改成你自己的接口地址，NiceFish 提供了一个基于 SpringBoot 的服务端接口实现版本，
与启动环境有关的配置项在 environment.* 和 angular.json 中。
4.单元测试
执行以下命令进行单元测试：
ng test
默认使用 ChromeHeadless 执行单元测试，按照 CPU 核心数量并发执行测试用例，karmar.conf.js 配置方式参考了 VWware 的 Clarity 项目，
代码覆盖率报告：
关于单元测试的详细使用方法，以及 Jasmine 的语法
5.集成测试
Angular 从 v12 开始，官方废弃了原来的集成测试工具 Protractor （量角器），本项目已经切换到官方推荐的 Cypress 集成测试工具，执行以下命令启动集成测试：
ng e2e
6.构建
与开发状态对应，构建模式有 2 种：
- 构建开发环境（带 mock 数据，不访问服务端）：ng build --configuration development-mock
- 构建带有服务端接口的开发环境（访问真实的服务端接口）：ng build --configuration development-backend
如果需要在构建产物的 index.html 中出现 <base href="/NiceFish/"/>，请在以上命令后面加上参数： --base-href /NiceFish/
注意，这里的 NiceFish 是项目名，如果你把项目名改成了其它的，请把 NiceFish 改成你自己的项目名。
7.直接部署到 nginx
- 根据上一步的描述构建出最终产物。
- 安装好 nginx，把 dist/browser 目录下的所有内容拷贝到 nginx 的 html 目录下。
- 参考本项目根目录下的 nginx.conf 配置文件，修改配置（此项目中的默认配置用于 Docker 环境，在 Windows 平台下无法使用）。
- 重启 nginx。
8.部署到 Docker 环境
请依次执行以下命令（请不要使用我的 ID ，改成你自己的 Docker 平台 ID ）：
- 构建镜像：sudo docker build -t damoqiongqiu/nice-fish .
- 查看镜像列表：sudo docker images
- 启动容器：sudo docker run -d -it -p 8080:80/tcp --name nice-fish damoqiongqiu/nice-fish:latest
- 查看运行中的容器：sudo docker ps -a
- 查看容器日志：docker logs --details CONTAINER_ID
- 进入容器：sudo docker exec -it CONTAINER_ID sh
9.打包分析
以下是用 webpack-bundle-analyzer 分析打包之后的模块构成：
看起来 CKEditor 和 ECharts 占了很大的体积，需要做一下异步加载。
webpack-bundle-analyzer 使用方法，请依次执行以下操作：
- npm i webpack-bundle-analyzer --save-dev
- package.json 的 scripts 配置里面加一行 "bundle-report": "webpack-bundle-analyzer dist/browser/stats.json"
- ng build --stats-json 编译（--stats-json 选项会生成一份 stats.json 配置文件）
- 执行 npm run bundle-report 查看打包过程
10.系列项目
NiceFish 的客户端项目：
NiceFish 的服务端项目：
11.关于 NodeJS 环境的常见坑点
- 中文开发者：如果你使用 cnpm 来安装依赖，可能会导致某些包不一致，导致应用起不来，目前原因不明，需要 cnpm 官方来解决。（cnpm 不是单纯的加速节点，它做了很多自己的处理，包括对一些 C++ 编写的 Node 模块做了预编译缓存，因此用它安装的包可能和官方源不一致。这不是 Angular 框架的问题，所有前端框架都存在这个问题。）
- 如果之前装过@angular/cli 需要先卸载：npm uninstall -g @angular/cli
- 如果之前装过老版本的 angular-cli 需要先卸载：npm uninstall -g angular-cli
- 如果你之前已经尝试用 npm install 安装过 node 模块，请手动把 NiceFish 根目录下的 node_moduels 目录删掉重新 npm install
- 命令行删除 node_modules 速度更快，Windows 平台使用： rmdir /s/q node_modules ，*nix 平台使用：sudo rm -rf node_modules
- 如果你遇到其它任何看起来比较玄幻的问题，请手动删掉 node_modules 目录，然后切换到 npm 官方源，重新安装所有 node 模块
- 如果你需要把项目发布到其它类型的 Server 上，例如 Tomcat，需要对 Server 进行一些简单的配置才能支持 HTML5 下的 PushState 路由模式，在 How to: Configure your server to work with html5Mode 这个小节里面把常见的 WEB 容器的配置方式都列举出来了，包括：IIS、Apache、nginx、NodeJS、Tomcat 全部都有。（请注意，这个配置不是 Angular 所特有的，当前主流的 SPA 型前端框架都需要做这个配置。）
12.界面截图
原文地址：https://blog.csdn.net/xiaofanren1111/article/details/145248753
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！