环境与 Hello World

这篇带你装工具、建项目，并在预览里看到第一行字。

学完能做什么： 用 BlueOS Studio 新建工程，把首页改成 Hello World 并预览。

前置： 读过 从这里开始。需要一台能安装 BlueOS Studio 的电脑。

1. 安装 Studio

1. 打开 BlueOS Studio 安装页，安装 IDE。
2. 安装并配置 Node.js（Studio 装依赖需要）。
3. 打开 Studio。后面步骤都在 Studio 里完成。

官方逐步截图见 构建首个蓝河应用。本页只保留你必须做对的步骤。

2. 新建工程并安装依赖

1. 欢迎页或菜单栏点「新建工程」。
2. 填项目名称、路径、应用名称、包名，点「完成」。
3. 点「安装依赖」，完成后再点「重新启动编译」。

模板工程大致是：

src/
  assets/
  pages/          每个子目录是一页
  app.ux          应用入口
  manifest.json   包名、路由、features

3. 写出 Hello World

打开 src/pages/ 下首页的 index.ux（模板里常见为 Demo/index.ux），改成：

<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>

保存后看右侧模拟器。应居中显示 Hello World。

和 Web 不一样

文字必须写在 <text> 里。写在 <div>Hello World</div> 里，设备上往往什么都不显示。

本页不解释「为什么不是 Vue」。下一篇专门讲。

本页要点

• 开发、预览、打包都在 BlueOS Studio 里做。
• .ux 顺序：<script> → <template> → <style>。
• 可见文字放进 <text>。

下一篇：这不是浏览器，也不是 Vue