当前位置:首页 > uni-app

uniapp安装框架

2026-03-05 15:19:45uni-app

安装UniApp框架的步骤

准备工作
确保系统已安装Node.js(建议版本12.0+),可通过以下命令检查版本:

node -v
npm -v

全局安装HBuilderX或Vue CLI
方法一:通过HBuilderX(官方推荐)

  1. 下载HBuilderX官方安装包,选择适合操作系统的版本。
  2. 解压后直接运行,无需安装(Windows需注意解压路径无中文)。

方法二:通过Vue CLI(需配合IDE)
执行命令全局安装Vue CLI:

npm install -g @vue/cli

创建UniApp项目
使用HBuilderX创建

  1. 打开HBuilderX,选择菜单栏「文件」→「新建」→「项目」。
  2. 选择「uni-app」模板,填写项目名称和路径,点击创建。

使用Vue CLI创建
运行以下命令创建模板项目:

npx degit dcloudio/uni-preset-vue#vite my-uni-project
cd my-uni-project
npm install

运行项目
开发模式运行

  • HBuilderX:点击工具栏「运行」→ 选择目标平台(浏览器/小程序等)。
  • Vue CLI:执行对应平台的命令,例如微信小程序:
    npm run dev:mp-weixin

    生成的代码需导入微信开发者工具。

注意事项

  • 小程序开发需提前配置各平台开发者工具路径(HBuilderX中设置)。
  • 首次使用Vue CLI需检查@dcloudio/uni-cli-shared等依赖是否完整。

uniapp安装框架

标签: 框架uniapp
分享给朋友:

相关文章

uniapp倒计时

uniapp倒计时

uniapp倒计时的实现方法 在uniapp中实现倒计时功能可以通过多种方式完成,以下是几种常见的实现方法: 使用setInterval实现基础倒计时 通过JavaScript的setInterv…

uniapp发布到应用商店

uniapp发布到应用商店

发布到苹果App Store 确保开发者账号已注册并加入Apple Developer Program,年费99美元。在Xcode中生成iOS发布证书(.p12)和描述文件(Provisioning…

uniapp旋转横屏

uniapp旋转横屏

实现横屏模式的方法 在UniApp中实现横屏模式,可以通过配置页面方向或使用CSS旋转实现。以下是两种常见方法: 修改manifest.json配置 在项目的manifest.json文件中,找到…

丸子uniapp

丸子uniapp

丸子UniApp简介 丸子UniApp是一个基于UniApp框架开发的移动应用解决方案,通常用于快速构建跨平台应用(如微信小程序、H5、Android/iOS等)。其核心特点是利用UniApp的“一次…

重构uniapp

重构uniapp

重构 Uniapp 项目的关键方法 代码结构优化 将页面、组件、静态资源按功能模块划分,避免全部堆放在根目录。建议采用以下结构: src/ ├── components/ // 通用组…

uniapp $on

uniapp $on

uniapp $on 方法详解 $on 是 UniApp 中用于监听全局事件的 API,常用于跨页面或跨组件通信。它基于 Vue 的事件机制,允许在全局范围内触发和监听自定义事件。 基本语法 un…