初识 uni-app，脚手架构建你的第一个小程序项目

作为一名热衷于探索新技术的小程序爱好者，uni-app 的出现让我眼前一亮。它的多端统一开发理念和丰富的生态系统，让我跃跃欲试。今天，我们就来一起使用脚手架创建一个 uni-app 项目，开启我们的小程序之旅。

准备工作

1. 安装 Node.js： uni-app 的开发需要 Node.js 环境，前往官网下载对应系统版本的 Node.js。
2. 安装 HBuilder X： HBuilder X 是一款功能强大的前端开发工具，也是 uni-app 推荐的官方 IDE。下载并安装 HBuilder X。

脚手架创建项目

1. 新建项目： 打开 HBuilder X，新建一个空白项目。
2. 选择脚手架： 在菜单栏中，依次选择「视图」->「脚手架」，在弹出的对话框中选择「uni-app」。
3. 填写信息： 按照提示填写项目名称、目录、框架版本等信息，点击「确定」。

项目结构

创建完成的 uni-app 项目具有清晰的结构：

• manifest.json： 小程序配置文件。
• pages： 页面目录，存放小程序页面代码。
• static： 存放静态资源，如图片、样式表等。
• app.vue： 小程序主入口文件。

运行项目

在 HBuilder X 中，点击工具栏上的「运行」按钮，选择「模拟器」或「真机」，即可预览小程序效果。

实例详解

我们以创建「你好，世界！」小程序为例，简单介绍一下 uni-app 的代码结构：

app.vue

<template>
  <view>你好，世界！</view>
</template>
<script>
export default {
  data() {
    return {}
  }
}
</script>
<style>
view {
  font-size: 20px;
  color: #333;
  text-align: center;
}
</style>

pages/index/index.vue

<template>
  <view>页面内容</view>
</template>
<script>
export default {
  data() {
    return {}
  }
}
</script>
<style>
view {
  font-size: 16px;
  color: #666;
}
</style>