第二天 - 开发工具与基础组件
导读：在本篇文章里，您将掌握鸿蒙开发工具DevEco的基本使用、ArkUI里的基础组件，并通过制作一个简单界面掌握使用
鸿蒙开发工具 - DevEco
工欲善其事，必先利其器。这节就让我们来看看以后会伴随我们鸿蒙开发的工具，如何下载使用
DevEco介绍
HUAWEI DevEco Studio（以下简称DevEco Studio）是基于IntelliJ IDEA Community开源版本打造（Java开发者狂喜，与idea基本一样），为运行在HarmonyOS系统上的应用和服务（以下简称应用/服务）提供一站式的开发平台。
作为一款开发工具，除了具有基本的代码开发、编译构建及调测等功能外，DevEco Studio还具有如下特点：高效智能代码编辑：支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能，提升代码编写效率。多端双向实时预览：支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览，便于快速查看代码运行效果。多端设备模拟仿真：提供HarmonyOS本地模拟器，支持Phone等设备的模拟仿真，便捷获取调试环境。DevEco Profiler性能调优：提供实时监控能力和场景化调优模板，便于全方位的设备资源监测，采集数据覆盖多个维度，为开发者带来高效、直通代码行的调优体验
好的，上面内容太多太正式了，咱们提炼一下上面说的四点：能写代码能实时看代码效果能用模拟器模拟真机来调试提供了性能分析工具，帮助app性能调优
运行环境要求
为保证DevEco Studio正常运行，建议电脑配置满足如下要求：
操作系统：Windows10 64位、Windows11 64位
内存：16GB及以上
硬盘：100GB及以上
分辨率：1280*800像素及以上
操作系统：macOS(X86) 12/13/14 macOS(ARM) 12/13/14
内存：8GB及以上
硬盘：100GB及以上
分辨率：1280*800像素及以上
注意：windows版内存需16GB以上，mac需8GB以上，不满足的话可能开发过程会相对比较卡。
下载与安装
https://developer.huawei.com/consumer/cn/deveco-studio/
安装过程就不详细介绍了，总之Windows版就是下一步下一步直到完成（默认安装到C盘，若不愿意则自己改一下安装位置再下一步），Mac版只需要拖入应用程序（Applications）文件夹即可
切换为中文环境
DevEco安装后界面默认是英文的，如果更习惯看中文界面，可通过如下方式设置
windows版修改：进入项目后，菜单栏选File -> Setting -> Plugins -> 搜索chinese -> 启用 -> 重启DevEcho后生效
mac版修改与windows版区别仅在于第一步不是从菜单栏File进入，而是在菜单栏苹果图标后第一项进入
创建项目
若首次打开DevEco Studio，请点击Create Project（新建项目）创建工程。如果已经打开了一个工程，请在菜单栏选择File（文件） > New（新建） > Create Project（新建项目）来创建一个新工程。
选择Application应用开发（Application下面的Atomic Service是元服务开发，后面学），选择模板“Empty Ability”，点击Next进行下一步配置。
进入配置工程界面，Compatible SDK选择“5.0.0(12)”（默认就是它，这就是鼎鼎大名的纯血鸿蒙版），其他参数保持默认设置即可。
点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。
项目区域说明
如上图所示：左侧的大区域为项目资源管理区，项目的一切资源都在这里展示早期我们只需要关注entry这个文件夹即可，我们早期的所有代码都在这个文件夹里编辑其中entry->src->main->ets->pages这个文件夹早期会成为我们写页面的地方其中entry->src->main->resource这个文件夹将来会作为我们放图片资源和国际化的地方其他的文件就不一一介绍，猫林老师不喜欢像其他教程一样上来就把所有文件功效列出来，没意义。看完也记不住，还不如咱们用到什么就介绍什么，然后这些文件自然而然就知道是啥意思了中间是代码编辑区域，以后写代码就是在这里了，如果你觉得中间区域不够大，可以把左侧面板缩小甚至折叠右侧是侧边工具栏，前期我们最常用的就是预览器，这个地方就是实时查看界面效果的地方，并且代码一改，预览器自动刷新底部区域我们前期暂时用不上，将来可能需要在终端里输入命令下载一些三方包、日志里查看console.log的输出等。但目前无须过于关注
Tips：新建项目后，页面代码里默认就会有个Text，并且打开预览器会看到Hello World，尝试修改Text小括号里的内容，给它一个字符串，试试看预览器会否有变化呢？
ArkTS语法说明
ArkTS是HarmonyOS优选的主力应用开发语言，ArkTS是在TypeScript（简称TS）生态基础上做了进一步扩展，保持了TS的基本风格，同时通过规范定义强化开发期静态检查和分析，提升程序执行稳定性和性能。
这里做个简单说明：TypeScript相当于扩展了JavaScript，多了些语法。而ArkTS又相当于扩展了TypeScript，关系如下图
从上图可以看到JS、TS拥有的语法，ArkTS也有，甚至更多（主要添加了一些声明式UI语法）。注：实际上出于稳定、安全的目的，有部分语法、接口在ArkTS里也不允许使用。但是大家都放心，这些语法、接口甚至在JS里大家也用的少，例如Object.getOwnPropertyDescriptor之类的这种方法。所以大家可以四舍五入默认TS的语法ArkTS都能用即可
最后，猫林老师要说明一点非常重要的事：本教程不会做基础语法讲解猫林老师默认本文章的读者至少是懂：变量、常量、分支语句、循环语句、函数、数组、对象、类、接口这些内容的纳尼？你毛都不会？那麻烦出门左转买包华子抽根烟冷静下。然后坐等猫林老师将来出语法教程。如果你懂TS，那么可以说接下来的语法你毫无压力，只是随着学习了解一些ArkTS新增的语法（这个猫林老师会讲）如果你仅仅只懂JS，其实问题也不大。TS本身在语法层面跟JS区别不大，而且语言是相通的，只要你明白变量、常量、分支语句等等这些概念，其实到时候一看猫林老师的代码，就知道是啥意思。就好比下面这句代码let age: number = 16你用屁股想都知道是声明了一个变量，变量类型是number，值是16退一万步说，假设后面的教程里如果有某个语法你看不懂是什么意思，也可以搜一搜，或者利用AI解答一下，或者直接留言问猫林老师也可以的。绝对不会影响学习进度和体验。而且这样相当于在新知识中补全自己的TS水平，猫林老师觉得大赞呢！
好了，废话不多说。接下来，我们正式进入到鸿蒙开发的世界！
ArkUI - 基础组件
ArkUI（方舟UI框架）为应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发上句是官网对ArkUI的说明这里猫林老师提炼一下：ArkUI相当于是华为内置好的UI组件库，我们可以用这些不同的组件组合在一起构成精美的页面