1:打开hbuilder，找到设置->通用设置->安全->打开服务端口

2:在hbuilder中新建一个项目

3:打开刚刚新建的项目，点击运行到小程序模拟器->微信开发者工具

4:使用Hbuilder来编写程序

以下是 uni-app 项目中各文件 / 文件夹的作用说明：

1. 根目录文件夹

I_love_you：项目根目录，是整个 uni-app 项目的容器，包含所有项目文件。

.hbuilderx：HBuilderX 编辑器生成的配置文件夹，用于存储 HBuilderX 对该项目的本地设置（如编辑器偏好、缓存等），一般无需手动修改。

pages：页面文件夹，存放项目中所有页面的相关文件。uni-app 采用 “pages 目录 + pages.json 配置” 的方式管理页面路由。

index 子文件夹：对应 “首页” 模块的页面容器。

index.vue：首页的单文件组件，是 uni-app 中页面的核心载体，包含页面的结构（<template>）、逻辑（<script>）和样式（<style>）。

static：静态资源文件夹，存放不会被编译处理的静态文件（如图片、字体、视频等），可直接通过路径引用（如static/logo.png）。

logo.png：静态图片文件，示例中的项目 logo。

unpackage：打包输出目录，运行或打包项目（如编译为微信小程序、App、H5 等平台）时，生成的目标平台代码会存放在这里。

2. 根目录文件

App.vue：应用根组件，是整个应用的入口组件。用于定义全局样式、配置应用级的生命周期（如应用启动 onLaunch、显示 onShow、隐藏 onHide 等）。

index.html：Web 端页面模板，是 uni-app 编译为 H5 平台时的 HTML 入口文件，可在此配置网页标题、引入外部脚本 / 样式等。

main.js：应用入口 JavaScript 文件，用于初始化 Vue 实例、引入全局组件、配置 Vuex（若有）、注册全局插件等全局逻辑。

manifest.json：应用配置文件，用于配置应用的基础信息（如应用名称、图标、版本号）、各平台权限（如相机、定位）、以及微信小程序、App、H5 等多端的专属配置。

pages.json：页面路由配置文件，用于配置页面的路径、窗口样式（如导航栏标题、颜色）、选项卡（tabBar）、页面过渡动画等路由相关规则。

uni.promisify.adapter.js：Promise 化适配器，用于将 uni-app 原生的 “回调式 API” 转换为 “Promise 风格 API”，方便使用 async/await 语法简化异步逻辑。

uni.scss：全局样式变量文件，uni-app 内置了一套跨端的样式变量（如主题色、字体大小基准值等），在此文件中可自定义或直接使用这些变量，保证多端样式的一致性