页面效果
代码结构
三层架构理解
为什么？
MVVM的目录组织方式，一般适用于单个模块内文件组织，为了更好地适配复杂应用的开发，建议采用三层架构的方式对整个应用的功能进行模块化，实现高内聚、低耦合开发。
DevEco Studio创建出的默认工程仅包含一个的entry类型的模块，如果直接使用如右所示的平级目录进行模块管理，工程逻辑结构较混乱且模块间的依赖关系不够清晰，不利于多人开发和维护。
三层工程结构
commons（公共能力层）：用于存放公共基础能力集合（如工具库、公共配置等）。commons层可编译成一个或多个HAR包或HSP包，只可以被products和features依赖，不可以反向依赖。
features（基础特性层）：用于存放基础特性集合（如应用中相对独立的各个功能的UI及业务逻辑实现等）。各个feature高内聚、低耦合、可定制，供产品灵活部署。不需要单独部署的feature通常编译为HAR包或HSP包，供products或其它feature使用。需要单独部署的feature通常编译为Feature类型的HAP包，和products下Entry类型的HAP包进行组合部署。features层可以横向调用及依赖common层，同时可以被products层不同设备形态的HAP所依赖，但是不能反向依赖products层。
products（产品定制层）：用于针对不同设备形态进行功能和特性集成。products层各个子目录各自编译为一个Entry类型的HAP包，作为应用主入口。products层不可以横向调用。
工程目录迁移
1.创建文件夹
创建三个文件夹commons、features、products
2.创建模块
Static LIbrary
依次创建
features层模块：quickstart、map、learning
commons层模块：utils、uicomponents
将entry模块放入products层
3.结构调整
3.1 修改entry->default
3.2 删除刚刚创建模块ets下文件，并在Index.ets中删除导出
3.3 迁移default下代码到quickstart中
3.4 修改quickstart下Index.ets为QuickStartPage，删除@Entry，并在Index.ets中导出
3.5 在default内创建pages，在pages下创建empty page ->Index.ets
3.6 在default/oh-package.json5中，写入依赖内容
3.7 安装依赖：Run”ohpm install”
3.8 修改pages/Index.ets，导入并使用QuickStartPage，运行
源码
Arkui01-三层架构下载
官网地址
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_Next-BasicArchitectureDesignPart2