最新版鸿蒙开发工具DevEco Studio保姆级安装教程

1. 下载DevEco Studio

进入HarmonyOS华为开发者官网，网址如下：

https://developer.huawei.com/consumer/cn/download/

注意：需要登录你的华为账号后，才能下载哦

我这里是windows系统，你根据自己的操作系统下载对应版本即可，下载最新版即可

下载完毕后，会得到一个压缩包，解压后会得到一个.exe的安装程序，就可以继续后面的安装步骤了

我这里给大家整理了以前的一些旧版本安装包下载地址，有需要的自取：

复制代码

devecostudio-windows-6.0.0.868(API20)
链接: https://pan.baidu.com/s/1aRwVFN_8vbsQiu6ew8uRtQ 提取码: 8888

devecostudio-windows-5.1.1.840(API19)
链接: https://pan.baidu.com/s/1JDLt-VDOXD9tZeIifMWolw 提取码: 8888

devecostudio-windows-5.1.0.828(API18)
链接: https://pan.baidu.com/s/1M7JasmNuAeyHJ0jZLcbxKw 提取码: 8888

devecostudio-windows-5.0.13.100(API17)
链接: https://pan.baidu.com/s/1DPWyRgSGa1ndtQkjlVVjrA 提取码: 8888

devecostudio-windows-5.0.7.210(API14)
链接: https://pan.baidu.com/s/1rI0d0mCTH2xEnoNAido9dg 提取码: 8888

deveco-studio-5.0.3.900
链接: https://pan.baidu.com/s/1rsRP2EcDSmIbeBiNonqBCg 提取码: 8888

deveco-studio-5.0.3.403
链接: https://pan.baidu.com/s/103HDuIj2Q4fJfrFuCcBzog 提取码: 8888

deveco-studio-3.1.0.501(API9-非纯血版)
链接: https://pan.baidu.com/s/1jDMwkIIXLRMf5K0oOi3IIg 提取码: 8888

2. 安装 DevEco Studio

接下来我们就可以安装，安装过程注意事项如下：

DevEco Studio 以及 SDK 文件安装路径不要包含中文或空格
下载 SDK 时，SDK 路径中不能包含中文字符；此处还必须保持网络畅通，且对外网访问没有任何限制

好，那么我们开始安装，双击exe程序

然后点击【下一步】

路径可以指定（建议不要安装到C盘），注意这个安装路径千万不要包含空格或中文，以免出现意想不到的问题，然后点击【下一步】

然后点击【下一步】

然后点击【安装】

安装中，此过程可能会久一点，等待一会即可，就会显示如下图安装完毕的提示框：

这里我们选择之后重启即可

然后点击【完成】按钮，整个安装就结束了，还是比较简单的

3. 配置 DevEco Studio

双击桌面【DevEco Studio】的快捷图标启动软件：

点击【OK】即可

点击【Agree】按钮即可看到下面面板：

4. 创建项目

基于下面页面：

我们按照国际惯例，先利用【DevEco Studio】开发工具新建一个示例项目感受下HarmonyOS项目的结构和乐趣，下面我们就新建一个项目来试试

点击【Create Project】即可进入下面页面：

然后进入下面工程信息配置页面：

以上界面就是进入配置工程界面，执行如下操作：

写入 Project name（工程的名称），可以自定义，由大小写字母、数据和下划线组成
写入 Bundle name（软件包名称），默认情况下，应用/服务 ID 也会使用该名称，应用/服务发布时，应用/服务 ID 需要唯一
写入 Save location（工程文件本地存储路径），注意存储路径不能包含中文字符
选择 Compile SDK（应用/服务的目标 API Version），在编译构建时DevEco Studio 会根据指定的 Compile API 版本进行编译打包；这里选择默认即可
Model name，用于设置默认模块的名称，默认是entry，默认即可
Device type，用于设置支持的设备类型，默认即可，也可以只选Phone，表示支持手机设备

点击【Finish】后，进入主开发面板了，如下：

注意：刚进入这个面板时，右下角有一个进度条在加载，正在做项目的初始化，此时我们等待一会，等进度条加载完毕即可，项目就创建完毕了。

5. 项目结构介绍

上面步骤中，ArkTS工程创建完毕后，工程目录结构是这样的：

在创建鸿蒙项目时，会自动生成一些文件和目录，鸿蒙项目的一级目录如下所示：

目录	作用
.hvigor	用于存放构建配置文件
.idea	用于存放开发工具配置文件
AppScope	用于存放应用全局需要的资源文件
entry	用于存放应用模块文件，包括入口文件、代码和资源等
hvigor	用于存放自动化构建工具，包括任务注册编排、工程模型管理等
oh_modules	用于存放项目所依赖的第三方库文件

在一级目录下有一些文件和目录会被经常使用，具体如下表所示：

类型	路径	作用
文件	AppScope/app.json5	应用的全局配置文件
目录	entry/src/main/ets	用于存放ArkTS源码文件
目录	entry/src/main/ets/entryability	用于存放应用的入口
目录	entry/src/main/ets/entrybackupability	用于存放应用备份恢复的入口
目录	entry/src/main/ets/pages	用于存放应用的页面
目录	entry/src/main/resources	用于存放应用所用到的资源文件，如图形文件、多媒体文件、字符串文件、布局文件等
目录	entry/src/main/resources/base/element	用于存放字符串、整数、颜色、样式等资源的JSON文件
目录	entry/src/main/resources/base/media	用于存放图形文件、多媒体文件，如视频、音频等文件，支持的文件格式包括.png、.gif、.mp3、.mp4等

类型	路径	作用
目录	entry/src/main/resources/rawfile	用于存放任意格式的原始资源文件
文件	entry/src/main/module.json5	模块配置文件，主要包含HAP的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息
文件	entry/build-profile.json5	模块信息、编译信息配置文件
文件	entry/hvigorfile.ts	模块级编译构建任务脚本文件
文件	entry/oh-package.json5	模块级依赖配置文件，描述第三方包的包名、版本、入口文件（类型声明文件）和依赖项等信息
文件	build-profile.json5	应用级配置文件，包括签名、产品配置等
文件	hvigorfile.ts	应用级编译构建任务脚本文件
文件	oh-package.json5	全局依赖配置文件

接下来我们这个页面【Index.ets】中的结构来进行说明一下

6. Index.ets 结构说明

上面我们新建的一个HelloWorld项目中，默认就存在【Index.ets】页面，但是这个默认给我们的页面代码比较冗余，我们将页面删减一下，让其变得更加简洁，删减之后完整代码如下：

js 复制代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
    }
    .height('100%')
    .width('100%')
  }
}

那么接下来我们先对这个页面中的结构做一个说明

struct Index {...}：自定义组件，可复用的UI单元
@Entry、@Component、@State：这些标记在ArkTS中被称为装饰器，是用来装饰类结构、方法、变量的
@Component：用来标记自定义组件的
@Entry：用来标记当前组件是一个入口组件，也就是说这个组件是可以独立被访问的
@State：用来标记一个变量是一个状态型的变量，值变化时会触发UI刷新
build函数：作用是以声明式方式描述UI结构
fontSize、fontWeight、width、height：都属于属性方法，作用是设置组件的UI样式

7 预览器介绍

说明：

在 HarmonyOS 应用/服务开发过程中，DevEco Studio 为开发者提供了 UI 界面预览功能，可以查看应用/服务的 UI 界面效果，支持 JS/ArkTS、Java 应用/服务的预览。预览器支持布局代码的实时预览，只需要将开发的源代码进行保存，就可以通过预览器实时查看应用/服务运行效果，方便开发者随时调整代码
由于操作系统和真机设备的差异，在预览界面中可能出现字体、颜色等与真机设备运行的效果存在差异，预览效果仅作为应用/服务开发过程中的参考，实际最终效果请以真机设备运行效果为准。为了更好的使用体验，建议先将 DevEco Studio 升级至最新版本，然后在 HarmonyOS SDK 中检测并更新 SDK 至最新版本

我们如何查看预览器呢？

非常简单，点击开发工具最右侧的【Previewer】选项即可，如下：

打开之后效果是这样的：

这样一个HelloWorld就显示在屏幕上了，如果在真机上运行，效果是差不多的

至此一个简易的HarmonyOS工程就建完并运行成功了

8. 报错解决方案

如果点击【Previewer】报错的话，可以参考下面解决方法尝试解决

1. cmd.exe ENOENT

如果你的控制台图如下错误信息：

说明的环境变量Path中缺少下面的配置：

复制代码

C:\Windows\System32

如下图所示，加进去就可以了：

新增后，重启DevEco Studio即可

2. HVIGOR_USER_HOME

如果控制台报错信息如下：

错误原因是：

在用户目录下没有 .npmrc 文件

解决办法：

在用户目录下创建【.npmrc】文件，文件内容如下：

复制代码

registry=https://repo.huaweicloud.com/repository/npm/
@ohos:registry=https://repo.harmonyos.com/npm/

然后再重启下DevEco Studio即可

9. Profile Manager介绍

1. 介绍

由于真机设备有丰富的设备型号，比如 Phone 设备，包括 Mate30、Mate40、P40、P50 等设备，不同设备型号的屏幕分辨率可能不一样。因此，在 HarmonyOS 应用/服务开发过程中，由于设备类型繁多，可能不能查看在不同设备上的界面显示效果。对此，DevEco Studio 的预览器提供了 Profile Manager 功能，支持开发者自定义预览设备 Profile（包含分辨率和语言），从而可以通过定义不同的预览设备 Profile，查看 HarmonyOS 应用/服务在不同设备上的预览显示效果。当前支持自定义设备分辨率及系统语言，如果是 Lite Wearable 设备类型，还支持自定义屏幕形状