c 前端架构 前端架构设计方案

1、使用angular脚手架进行多项目工作区搭建*

搭建后的项目到project层，后续项目需自主配置

ng new my-workspace --create-application false

2、项目分析与架构分层设计*

为了方便管理，公用组件与公共层进行拆分，剩余分层根据具体业务需求进行拆分，比如：采购层，仓储层，用户中心，具体分层设计根据项目具体业务需求设计，考虑后台设计模式，本文后台假设使用DDD进行服务拆分，前后台工程对应。

#项目创建
ng generate application my-first-app

3、项目分层搭建完成后进行项目配置*

项目配置一定要考虑部署方式，如果采用CI/CD 容器化部署的方式，每个项目需配置Dockerfile文件，编写dockerfile脚本，并且对package.json配置进行修改,方便CI/CD部署，在这儿基于nginx进行镜像打包docker镜像

3.1 package.json文件配置

配置自定义npm命令，多项目文件，指定project执行项目工程（与angular.json文件中projects下项目结构匹配）以及configuration配置文件选择。

3.2 将Dockerfile与指定项目共同打包，配置在angular.json中指定项目下的配置中

不了解angular分层结构，参考https://angular.cn/guide/file-structure

4、开发模式

具体开发模式根据前端组件封装情况决定，若封装统一模板，则可选择采用多投影，或者条件投影的方式做组件插拔。可增加组件复用。前端组件开发要求考虑组件扩展性，可复用组件不做重复开发。

5、项目路由设计

根据业务层拆分后的项目，每个模块放在单独文件夹下并导入路由文件，模块路由单独组合，页面路由采用主子路由的模式配置。每个模块有单独路由配置。

每个模块单独配置路由

表单页面比如存在详情与列表这种情况采用子路由模式配置

将每个页面配置为一个单独的模块儿就可以为其配置自定义的路由地址

注：没有根据路由走可能是没有在app.component.html中进行配置

<router-outlet></router-outlet>

6、项目粒度细化

每个页面配置单独的module文件，主次页面绑定在统一module，根据子路由进行页面访问地址配置。将每一个页面理解为一个单独的模块，对页面与页面之间的关联进行拆分，降低耦合！

7、公共层

采用依赖注入的方式进行接口配置，保证接口易用，独立可配置，调用不同平台接口配置不同服务，在此项目中进行统一整理
使用命令创建服务
       `ng generate service User`![在这里插入图片描述](https://img-blog.csdnimg.cn/46283580aacb4b16a37201b5a0a515b3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQ0NDY4NTQ2,size_20,color_FFFFFF,t_30,g_se,x_16)

8、项目中每个模块下每个页面配置单独服务

主子页面使用接口，实体进行统一管理，方便代码整理与后续维护，降低开发成本

9、前端架构设计时需充分考虑

前端架构设计需充分考虑项目后期运行环境，人员技术水平，上手成本不宜太高，考虑现有其他业务，在兼容其他业务架构的情况下进行架构设计，充分考虑业务走向，实际开发环境，避免摊子铺得太大，一般小公司也不会选择采用微服务的形式开发，一站到底式开发另当别论了哈。

10、项目粒度进行合理设计

项目体量小方便后期项目部署扩展，项目架构就已经成功一大步，条件允许，能拆则拆，合理拆分，避免后期因为项目设计不合理导致单体项目体重。

11、架构设计的同时需指定开发规范，避免垃圾代码

前端项目通病，不同页面，同样的功能，例如列表字段不同，但是数据源是相同，这种情况往往会出现两个字段不同共用一个数据源的情况，前端开发人员应考虑是否可对组件进行设计，实现需求，此类重复代码后期统统都是垃圾代码，没有必要的代码只会让项目变得更重。
前端架构设计将公共的内容能封则封，降低对开发人员的要求，降低上手难度与理解难度，业务开发人员只需关注代码开发，而无需关注项目结构

项目中可扩展的东西很多，配置的东西也很多，不一 一说明，具体根据后台架构设计与业务需求，开发需求，进行扩展。
Angular的核心就是组件化，我们需要对整体架构进行思考，怎么样将项目进行合理拆分，加深对组件化的理解，每一个完整的页面就是一个模块，每一个功能就是一个组件。就像搭积木，将他们严丝合缝的搭建起来！