uniapp 脚手架

uniapp 脚手架介绍

uniapp 是一个使用 Vue.js 开发跨平台应用的框架，支持编译到 iOS、Android、H5 以及各种小程序。脚手架工具用于快速初始化 uniapp 项目结构，简化开发流程。

安装 uniapp 脚手架

确保已安装 Node.js（建议版本 12+），通过 npm 或 yarn 全局安装 Vue CLI：

npm install -g @vue/cli

使用 Vue CLI 创建 uniapp 项目：

vue create -p dcloudio/uni-preset-vue my-project

项目模板选择

执行上述命令后，会提示选择模板类型：

• 默认模板（包含基础配置）
• 自定义模板（可自由选择需要的功能模块，如 TypeScript、Vuex 等）

运行与编译

进入项目目录后，通过以下命令运行开发环境：

cd my-project
npm run dev:%PLATFORM%

其中 %PLATFORM% 替换为目标平台（如 h5、mp-weixin 等）。

编译生产环境代码：

npm run build:%PLATFORM%

脚手架目录结构

生成的典型目录结构如下：

• pages：存放页面文件
• static：静态资源（图片、字体等）
• components：可复用组件
• manifest.json：应用配置（如 AppID、启动页等）
• pages.json：页面路由与样式配置

扩展功能

通过安装插件增强脚手架能力：

• @dcloudio/uni-ui：官方 UI 组件库
• uni-helper/vite-plugin-uni-pages：动态路由支持
• @uni-helper/vite-plugin-uni-layouts：布局系统

注意事项

• 开发微信小程序需在 manifest.json 中配置 appid。
• H5 平台部署时注意跨域问题，需配置服务器或代理。
• 使用 Vue 3 需选择对应的模板（如 uni-preset-vue#vite）。