uniapp cli 如何使用

在uniapp cli项目中，如何正确配置和使用命令行工具？我按照官方文档操作，但运行npm run dev时报错，提示缺少某些依赖。请问完整的CLI使用流程是怎样的？需要安装哪些必备的依赖包？另外，如何区分H5和小程序的编译命令？

2 回复

UniApp CLI 使用步骤：

  1. 安装：
    npm install -g @vue/cli
    再安装 UniApp CLI：
    npm install -g @dcloudio/uni-cli

  2. 创建项目：
    uni create -t my-project
    或使用预设模板：
    uni create -t default my-project

  3. 进入项目目录：
    cd my-project

  4. 运行项目：

    • H5：uni serve
    • 微信小程序：uni build --platform mp-weixin，再用微信开发者工具导入

  5. 打包发布：
    uni build --platform [平台名]，如 mp-weixin、app 等。

常用命令：

  • uni serve：开发环境 H5
  • uni build：打包
  • uni -v：查看版本

注意：开发小程序需配合对应平台的开发者工具。


UniApp CLI 是基于 Vue CLI 扩展的命令行工具，用于创建和管理 UniApp 项目。以下是基本使用方法：

1. 环境准备

确保已安装 Node.js（建议 14+ 版本）和 Vue CLI：

npm install -g @vue/cli

2. 创建项目

# 使用正式版（Vue 2）
vue create -p dcloudio/uni-preset-vue my-project

# 使用 Vue 3 版本
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

3. 运行项目

进入项目目录后，选择平台运行：

# 开发环境
npm run dev:%PLATFORM%
# 示例：H5 平台
npm run dev:h5

# 生产构建
npm run build:%PLATFORM%
# 示例：微信小程序
npm run build:mp-weixin

4. 常用平台参数

  • h5：H5 网页
  • mp-weixin：微信小程序
  • mp-alipay：支付宝小程序
  • mp-baidu：百度小程序
  • app-plus：App

5. 项目结构

my-project/
├── src/
│   ├── pages/          # 页面文件
│   ├── static/         # 静态资源
│   └── App.vue         # 应用配置
├── manifest.json       # 应用配置
└── package.json

6. 注意事项

  • 首次运行会自动安装依赖
  • 微信小程序需在微信开发者工具中导入 dist/dev/mp-weixin 目录
  • 修改 manifest.json 可配置各平台参数

通过 CLI 可快速启动多端开发，无需单独安装 HBuilderX。

回到顶部