一介布衣

🧭 快速导航

搭建开发环境 - 从安装到第一个Hello World ​

🛠️ 工欲善其事，必先利其器。今天我们来搭建UniApp的开发环境

开发环境选择 ​

UniApp有两种开发方式：

1. HBuilderX（推荐新手） ​

  • 官方IDE，开箱即用
  • 集成了编译、调试、发布等功能
  • 对新手友好，不需要复杂配置

2. CLI命令行 ​

  • 适合有经验的开发者
  • 可以使用自己喜欢的编辑器（VS Code等）
  • 更灵活，但需要自己配置

今天我们先用HBuilderX，因为它最简单！

第一步：下载HBuilderX ​

  1. 打开官网：https://www.dcloud.io/hbuilderx.html

  2. 选择版本：

    • 正式版：稳定，适合正式项目
    • Alpha版：最新功能，可能有bug

    建议新手选择正式版

  3. 根据你的系统下载：

    • Windows
    • macOS
    • Linux

第二步：安装HBuilderX ​

Windows用户： ​

  1. 下载后是一个zip文件
  2. 解压到你想要的目录（比如 D:\HBuilderX）
  3. 双击 HBuilderX.exe 就能运行

Mac用户： ​

  1. 下载后是一个dmg文件
  2. 双击打开，把HBuilderX拖到应用程序文件夹
  3. 在启动台找到HBuilderX并打开

注意：第一次打开可能会提示安全警告，点击"打开"即可。

第三步：创建第一个项目 ​

  1. 打开HBuilderX

  2. 新建项目

    • 点击菜单：文件 → 新建 → 项目
    • 或者直接按快捷键：Ctrl+N（Mac是Cmd+N）

  3. 选择项目类型

    选择：uni-app

  4. 填写项目信息

    项目名称：my-first-uniapp
项目目录：选择一个你喜欢的文件夹
模板：默认模板

  5. 点击创建

恭喜！你的第一个UniApp项目就创建好了！🎉

第四步：了解项目结构 ​

创建完项目后，你会看到这样的文件结构：

my-first-uniapp/
├── pages/              # 页面文件夹
│   ├── index/         # 首页
│   │   └── index.vue
│   └── ...
├── static/            # 静态资源（图片、字体等）
├── uni_modules/       # 插件模块
├── App.vue           # 应用配置文件
├── main.js           # 入口文件
├── manifest.json     # 应用配置
├── pages.json        # 页面路由配置
└── uni.scss          # 全局样式

不要被这么多文件吓到！ 我们先关注最重要的几个：

  • pages/index/index.vue：首页文件
  • pages.json：页面配置
  • App.vue：全局配置

第五步：运行项目 ​

在浏览器中预览： ​

  1. 点击工具栏的"运行"按钮
  2. 选择"运行到浏览器" → "Chrome"
  3. 等待编译完成，浏览器会自动打开

你应该能看到一个简单的页面，上面写着"Hello uniapp"！

在微信开发者工具中预览： ​

  1. 首先需要下载微信开发者工具
  2. 在HBuilderX中点击"运行" → "运行到小程序模拟器" → "微信开发者工具"
  3. 第一次运行会提示配置微信开发者工具路径

第六步：修改代码试试 ​

让我们来修改一下首页，看看效果：

  1. 打开首页文件：pages/index/index.vue

  2. 找到这段代码：

    vue
    <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
        <text class="title">\{\{title\}\}</text>
    </view>
</view>

  3. 修改标题：

    vue
    <script>
export default {
    data() {
        return {
            title: '我的第一个UniApp！' // 修改这里
        }
    }
}
</script>

  4. 保存文件（Ctrl+S 或 Cmd+S）

  5. 查看效果：浏览器会自动刷新，你应该能看到标题变了！

常见问题解决 ​

1. HBuilderX打不开？ ​

  • Windows：可能被杀毒软件拦截，添加到白名单
  • Mac：系统安全设置问题，在"安全性与隐私"中允许

2. 项目运行失败？ ​

  • 检查项目路径是否包含中文或特殊字符
  • 重启HBuilderX试试
  • 查看控制台错误信息

3. 微信开发者工具连接失败？ ​

  • 确保微信开发者工具已安装
  • 在微信开发者工具中开启"服务端口"
  • 重新配置工具路径

开发工具推荐 ​

除了HBuilderX，你还可以安装这些工具来提升开发效率：

浏览器插件： ​

  • Vue.js devtools：调试Vue组件

微信开发者工具： ​

小结 ​

今天我们完成了：

  • ✅ 下载并安装HBuilderX
  • ✅ 创建第一个UniApp项目
  • ✅ 了解项目结构
  • ✅ 成功运行项目
  • ✅ 修改代码并看到效果

现在你已经有了一个可以工作的开发环境！🎉

下一步 ​

环境搭建好了，接下来我们要深入了解项目结构。下一篇《项目结构解析 - 这些文件夹都是干什么的？》会详细讲解每个文件和文件夹的作用。

作业 ​

试着修改一下首页的内容：

  1. 改变标题文字
  2. 修改页面背景颜色
  3. 添加一个按钮

不要怕出错，大胆尝试！有问题随时在评论区问我。

记住：编程最重要的是动手实践，光看不练是学不会的！