uniapp脚手架搭建

uniapp脚手架搭建方法

安装HBuilderX

HBuilderX是官方推荐的开发工具，内置uniapp脚手架支持。从官网下载并安装HBuilderX，安装完成后即可直接创建uniapp项目。

使用Vue CLI创建

全局安装@vue/cli，通过命令行创建uniapp项目：

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

选择预设模板（默认模板或自定义配置），完成项目初始化。

使用npx快速创建

无需全局安装，直接通过npx调用vue-cli创建项目：

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

此方式会基于Vite模板生成项目结构，适合需要现代构建工具的场景。

项目结构说明

创建完成后，典型目录结构包含：

• pages：页面目录
• static：静态资源
• components：组件目录
• manifest.json：应用配置
• main.js：入口文件

运行与编译

开发阶段运行以下命令启动实时编译：

npm run dev:%PLATFORM%

替换%PLATFORM%为目标平台（如h5、mp-weixin）。生产环境构建使用：

npm run build:%PLATFORM%

注意事项

• 使用Vue CLI方式需确保Node版本≥12
• 微信小程序开发需在manifest.json中配置appid
• 首次运行需安装依赖：npm install
• 跨平台兼容性问题需通过条件编译解决