uniapp 脚手架

uniapp 脚手架介绍

uniapp 脚手架是用于快速初始化 uniapp 项目的工具，通过命令行或图形化界面生成项目模板，内置基础目录结构和配置，支持多端开发（H5、小程序、App等）。以下是常见使用方式和相关工具：

官方脚手架安装

通过 npm 或 yarn 全局安装 @vue/cli，再通过 vue-cli 创建 uniapp 项目：

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

选择预设模板（如默认模板、uni-ui项目等）完成初始化。

HBuilderX 可视化创建

HBuilderX 是官方推荐的 IDE，提供图形化脚手架：

1. 下载安装 HBuilderX（官网）。
2. 新建项目时选择 uniapp 模板（标准模板、uni-ui模板等）。
3. 自动生成项目结构，无需手动配置构建工具。

第三方脚手架工具

部分社区开发的工具可扩展功能：

• uni-helper/cli: 提供更多自定义选项。

  npx @uni-helper/cli create my-project

• vite-plugin-uni: 基于 Vite 的快速启动模板。

  npm init vite@latest my-project --template uni

项目目录结构

生成的典型目录如下：

├── src
│   ├── pages         # 页面目录
│   ├── static        # 静态资源
│   ├── components    # 组件
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
├── manifest.json     # 应用配置
├── pages.json        # 页面路由配置
└── uni.scss          # 全局样式变量

自定义模板

若需复用自定义配置，可发布模板到 npm 或直接克隆仓库：

vue create -p username/repo my-project

或手动修改 uni-preset-vue 的预设配置。

注意事项

• 使用 CLI 时需确保 Node.js 版本 ≥12。
• HBuilderX 创建的项目默认依赖内置构建工具，CLI 项目依赖 webpack 或 vite。
• 多端开发需在 manifest.json 中配置各平台参数。