当前位置：首页 > uni-app

uniapp简单项目

2026-03-05 09:41:55uni-app

创建uniapp简单项目的步骤

环境准备
确保已安装HBuilderX（官方IDE）或配置好Node.js环境（使用vue-cli）。HBuilderX提供一键创建模板功能，适合快速入门。

项目初始化
通过HBuilderX创建：

打开HBuilderX，选择「文件」→「新建」→「项目」
选择「uni-app」模板，填写项目名称和路径
勾选默认模板（如Hello uni-app）

或通过命令行创建（需安装vue-cli）：

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

基础目录结构

├── pages/           # 页面目录
│   └── index/       # 示例首页
│       ├── index.vue
│       └── index.json
├── static/          # 静态资源
├── App.vue          # 应用入口
├── main.js          # 全局配置
└── manifest.json    # 跨端配置

编写第一个页面

在pages/index/index.vue中：

<template>
  <view class="content">
    <text>{{ message }}</text>
    <button @click="changeText">点击切换</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello UniApp"
    }
  },
  methods: {
    changeText() {
      this.message = "文本已更新！"
    }
  }
}
</script>

<style>
.content {
  padding: 20px;
}
button {
  margin-top: 10px;
}
</style>

配置页面路由

在pages.json中添加路由：

uniapp简单项目

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}

运行与调试

HBuilderX：点击工具栏的运行按钮，选择目标平台（浏览器/小程序/App）

命令行：使用对应平台的命令：

npm run dev:%PLATFORM%  # 如 dev:mp-weixin 运行到微信开发者工具

打包发布

小程序：通过开发者工具导入unpackage/dist/dev/mp-weixin目录
H5：运行npm run build:h5生成dist目录
App：使用HBuilderX的「发行」→「原生App-云端打包」

常用组件示例

<template>
  <view>
    <swiper indicator-dots autoplay>
      <swiper-item v-for="(item,index) in 3" :key="index">
        <view class="swiper-item">轮播图{{index+1}}</view>
      </swiper-item>
    </swiper>
  </view>
</template>