---
title: 使用指南
summary: 介绍 Tuya MiniApp IDE 的基本使用流程，包括登录、项目管理、新建项目和工作区初始化。
questions:
  - Tuya MiniApp IDE 的主要功能是什么？
  - 如何注册涂鸦开发者平台账号？
  - 如何在 IDE 中新建项目？
  - 新建项目时需要填写哪些必要信息？
  - 如何切换数据中心？切换数据中心会影响哪些功能？
  - 如何切换空间来关联不同空间的小程序？
  - 面板小程序新建项目时为什么需要关联产品？
  - 工作区初始化需要哪些前置条件？
  - 如何删除已创建的项目？删除时本地文件夹会被删除吗？
  - IDE 使用什么工具安装项目依赖？
---

## 使用指南

Tuya MiniApp IDE 帮助开发者进行 涂鸦小程序 的开发调试，当前主要包括模拟器和调试器两大部分。后续我们会以插件的形式集成更多功能，来提升开发调试体验。

该工具没有集成代码编辑器的功能，所以它看起来像一个“小程序浏览器”。鉴于当前的代码编辑器（如 Visual Studio Code）已经相当成熟，我们推荐开发者采用开发者工具和自选代码编辑器配合的方式进行开发，就像开发 web 程序一样。

涂鸦小程序 团队会专注在 涂鸦小程序 本身的功能，也会探索如何与外部编辑器更好配合。

## 登录页

- 账号为涂鸦开发者平台的账号，可以在 [涂鸦开发者平台](https://auth.tuya.com/register?from=https%3A%2F%2Fiot.tuya.com%2Fminiapp%2F) 注册。
- 可以在右上角切换语言。

<Image 
  src="/images/ide/new/1.png" 
  style={{
      borderRadius: '10px',
      width: '300px',
      boxShadow: '0 0 5px rgba(0,0,0,0.3)',
    }}
/>

## 项目管理页

基本页面：

<Image 
  src="/images/ide/new/2.png?333" 
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

### 切换数据中心

在标题的旁边可以切换不同的数据中心。切换数据中心会影响以下功能：

- 真机调试
- 模拟器的 app 授权登录
- 开发者平台各种白名单

### 切换空间

在标题的旁边可以切换[空间](https://developer.tuya.com/cn/docs/iot/sub-account?id=K914jj4h334gx)，从而可以关联不同空间的小程序和显示应已关联该空间下小程序的项目

### 新建项目

1. 单击 **新建** 按钮，填写必要的数据：

- **项目路径**：默认是一个固定的路径，和一个递增的文件夹名字。
- **项目名称**：只是方便用户区分自己现有的小程序，暂时没有在其他地方用到。
- **关联智能小程序**：把本地项目关联到 **开发者平台** 对应的小程序。
  - 需要先在 **开发者平台** 创建一个小程序。
- **调试产品**（非必选）：如果所选的 **关联智能小程序** 为面板小程序，则一定需要关联产品。后续调试会以该产品为调试对象。

<Image 
  src="/images/ide/new/3.png?333" 
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

2. 选择初始化模板。

<Image 
  src="/images/ide/new/4.png?33" 
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

### 其他功能

- 在新建和导入项目后，都会生成快捷入口，可以直接单击该项目卡片进入工作区。每次都会自顶最后一次打开的项目。

- 悬浮在项目卡片上，右边出现删除按钮。如果选择 **删除本地项目**，本地文件夹也会被一起删除。

## 工作区页

进入工作区的时候，会有项目初始化的过程，时间会按项目复杂度变化。

1. 确保系统安装了 [node](https://nodejs.org/en) 和 [yarn](https://yarnpkg.com/)
2. 检测项目是否已经安装依赖（node_modules），会优先用 `yarn` ，其次用 `npm install --legacy-peer-deps`
3. 项目编译，可以在日志处看到过程和错误

基础页面:

<Image 
  src="/images/ide/new/5.png" 
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

## 下一步

- [工作区](/cn/miniapp/devtools/tools/workspace)
- [远程调试](/cn/miniapp/devtools/tools/debug)