安装与首个应用

本教程介绍如何安装 BlueOS Studio、创建工程，并在模拟器中运行第一个 BlueOS 页面。完成后，页面中央会显示 Hello World。

前提条件

• 已阅读快速入门。
• 准备一台支持安装 BlueOS Studio 的电脑。

安装开发工具

1. 从 BlueOS Studio 安装页面下载并安装 BlueOS Studio。
2. 安装 Node.js，供 BlueOS Studio 管理工程依赖。
3. 启动 BlueOS Studio。

需要安装界面截图时，参见构建首个蓝河应用。

创建工程

1. 在欢迎页或菜单栏中选择 新建工程。
2. 填写项目名称、项目路径、应用名称和包名。
3. 选择 完成。
4. 选择 安装依赖。
5. 等待依赖安装完成。
6. 选择 重新启动编译。

模板工程包含以下主要文件：

src/
  assets/          静态资源
  pages/           页面目录
  app.ux           应用入口
  manifest.json    应用配置

编写首页

1. 打开 src/pages/ 中首页的 index.ux。模板工程通常使用 src/pages/Demo/index.ux。
2. 将文件内容替换为以下代码：

<script>
  export default {
    data: {},
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center w-full h-full">
    <text class="text-white text-4xl">Hello World</text>
  </div>
</template>

<style>
@tailwind utilities;
</style>

3. 保存文件。
4. 查看右侧模拟器。

和 Web 不一样

可见文字必须放在 <text> 组件中。将文字直接写入 <div> 会导致设备无法正常显示内容。

验证结果

模拟器中的页面应居中显示 Hello World。如果页面没有更新，请确认依赖安装和编译均已完成，再检查 BlueOS Studio 的编译输出。

后续步骤

继续阅读与 Vue2 的差异，了解 BlueOS 模板语法与 Web 运行时的区别。