开发环境搭建

整理时间: 2024年8月6日

概述

基本上安装一个 集成开发环境 就全部搞定.

内置组件中包含: 编辑器, Node 环境, 预览组件, 工具组件, SDK 等.

早期版本需要自行配置安装目录等, 似乎新版本不需要, 都默认了.

操作步骤:

  1. 从官网下载 DevEco Studio.
  2. 双击安装 (下一步默认, 最好配置一下安装目录).
  3. 双击运行 (第一次运行需要设置许可, 与导入配置).
  4. 认识界面 (资源管理器, 编码区, 预览区).
  5. 设置中文 (默认已安装插件, 在设置中找到插件, 在已安装插件中选择中文, 设置后重启 IDE)

详细步骤

1. 在官网下载 DevEco Studio

image-20240806105605466

image-20240806105812642

image-20240806105820698

2. 安装下一步即可 (略)

安装完成后会要求重启计算机.

3. 第一次运行 (略)

第一次运行会提示导入之前的配置, 可略. 同时需要通过一个协议.

4. 新建项目

打开 IDE 后, 选中模板 (第一个空模板), 下一步后进入配置页, 可以设置应用名, 包名, API 版本等.

image-20240806110216761

image-20240806110228301

image-20240806110247479

5. IDE 界面

image-20240806110749575

注意:

  • 左侧为资源管理器.
  • 中间是代码区.
  • 右边是预览.
  • 预览重新加载时会重新执行代码.
  • 代码区中的 console.log() 可以在日志窗口中查看.
  • 预览区有一个 LivePreview, 可以保证在代表保存后立即运行.

开发小提示:

image-20240810135357697

对于不开发界面, 仅仅是语言验证或学习, 可以将 livePreview 关闭, 然后在需要的时候使用刷新来运行代码. 这样对电脑效率会高一些.

6. 设置中文

在 文件, 设置 中找到插件, 在已安装插件中找到 Chinese 插件, 选中后, 重新启动 IDE 即可.

image-20240806111737055

Last Updated:
Contributors: jk