|
| 1 | +--- |
| 2 | +title: 快速开始 |
| 3 | +--- |
| 4 | + |
| 5 | +### 环境准备 |
| 6 | + |
| 7 | +请确认[Deft基础环境](/guides/prerequisites)已经配置 |
| 8 | + |
| 9 | +然后需要安装`DevEco Studio`,如果未安装,直接去官网下载安装即可。 |
| 10 | + |
| 11 | +另外,需要安装鸿蒙相关targets和`deft-cli`工具包,执行以下代码可快速安装。 |
| 12 | + |
| 13 | +```bash |
| 14 | +rustup target add aarch64-unknown-linux-ohos |
| 15 | +rustup target add x86_64-unknown-linux-ohos |
| 16 | +cargo install deft-cli |
| 17 | +``` |
| 18 | + |
| 19 | +DevEcoStudio安装完成后,进入`File`->`Settings`->`OpenHarmony SDK`,下载SDK,API版本选择14或者15,需要安装`Native`和`Toolchains`模块,其他模块可以不选。 |
| 20 | + |
| 21 | +SDK安装完成后,配置一下`OHOS_SDK_HOME`和`DEVECO_HOME`环境变量。 |
| 22 | + |
| 23 | +`OHOS_SDK_HOME`为SDK安装路径(含版本号),`DEVECO_HOME`为DevEcoStudio安装目录。 |
| 24 | + |
| 25 | +Windows参考示例: |
| 26 | + |
| 27 | +```bash |
| 28 | +set OHOS_SDK_HOME=C:\Users\dev\AppData\Local\OpenHarmony\Sdk\15 |
| 29 | +set DEVECO_HOME=C:\Program Files\Huawei\DevEco Studio |
| 30 | +``` |
| 31 | + |
| 32 | +MacOS参考示例: |
| 33 | + |
| 34 | +``` |
| 35 | +export OHOS_SDK_HOME=/Users/dev/Library/OpenHarmony/Sdk/15 |
| 36 | +export DEVECO_HOME=/Applications/DevEco-Studio.app/Contents |
| 37 | +``` |
| 38 | + |
| 39 | +### 创建工程 |
| 40 | + |
| 41 | +执行下面命令,快速创建新工程,demo为新工程名称。 |
| 42 | +```bash |
| 43 | +npm create deft@0.7 demo |
| 44 | +``` |
| 45 | +根据自己的喜好选择语言和框架。 |
| 46 | + |
| 47 | +命令执行完后,会在当前目录下创建一个`demo`项目,默认情况下,新建的工程是不包含鸿蒙工程文件的,执行下面命令,初始化鸿蒙工程。 |
| 48 | + |
| 49 | +```bash |
| 50 | +cd demo |
| 51 | +deft init ohos |
| 52 | +``` |
| 53 | + |
| 54 | +AppID随便填,格式正确即可,参考示例:`com.example.myapp`。 |
| 55 | + |
| 56 | +然后执行以下代码启动项目: |
| 57 | + |
| 58 | +```bash |
| 59 | +npm install |
| 60 | +npm run dev |
| 61 | +``` |
| 62 | + |
| 63 | +启动成功后,会看到如下输出: |
| 64 | + |
| 65 | +```text |
| 66 | +... |
| 67 | +webpack 5.91.0 compiled successfully in 1828 ms |
| 68 | +
|
| 69 | +---------------------------------------------------------- |
| 70 | +Press r to run on this device |
| 71 | +Press h to run on the connected HarmonyOS device(arm64) |
| 72 | +Press e to run on the connected HarmonyOS device(x86_64) |
| 73 | +Press q to quit |
| 74 | +---------------------------------------------------------- |
| 75 | +
|
| 76 | +``` |
| 77 | + |
| 78 | +### 构建预览 |
| 79 | + |
| 80 | +预览前,确保鸿蒙设备已经连接到电脑并开启USB调试模式(如果是使用DevEcoStudio创建的模拟器,确保模拟器已经启动即可,不需要额外设置) |
| 81 | + |
| 82 | +根据自己的鸿蒙设备架构(windows+模拟器一般是x86_64,真机或Mac+模拟器一般是arm64),按`e`或`h`即可开始构建预览应用。首次构建,需要下载依赖,所以耗时可能会比较长,可以配置cargo镜像提高下载速度。 |
| 83 | + |
| 84 | +构建成功后,会自动在已连接的鸿蒙设备内启动预览,可以直接修改ui目录下的JS/TS文件实时预览效果。 |
| 85 | + |
| 86 | +# 目录结构 |
| 87 | + |
| 88 | +```text |
| 89 | +├── ohos -- 鸿蒙工程相关文件 |
| 90 | +├── build.rs -- Cargo构建脚本 |
| 91 | +├── Cargo.toml -- Cargo项目配置文件 |
| 92 | +├── package.json -- JS项目配置文件 |
| 93 | +├── src -- Rust源代码 |
| 94 | +│ └── main.rs |
| 95 | +├── tsconfig.json -- TypeScript配置文件 |
| 96 | +├── ui -- JS/CSS源码 |
| 97 | +│ ├── main.ts -- JS入口文件 |
| 98 | +│ ├── App.vue |
| 99 | +│ └── deft-env.d.ts |
| 100 | +└── webpack.config.js -- Webpack配置文件 |
| 101 | +``` |
| 102 | + |
| 103 | +# 打包 |
| 104 | + |
| 105 | +执行下面命令构建release版so库 |
| 106 | +```bash |
| 107 | +npm run build:ohos |
| 108 | +``` |
| 109 | +构建完成后,使用`DevEcoStudio`打开`ohos`目录,和普通鸿蒙应用一样打包即可。 |
0 commit comments