怎么运行uniapp

运行 UniApp 的基本方法

安装开发环境 确保已安装 Node.js（建议 LTS 版本），通过命令行验证安装：

node -v
npm -v

全局安装脚手架工具 使用 npm 或 yarn 安装 HBuilderX 或官方 CLI：

npm install -g @vue/cli @dcloudio/uni-cli

创建项目 通过以下命令创建模板项目：

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

或直接使用 HBuilderX 可视化界面新建 UniApp 项目。

开发模式运行

微信小程序 在项目根目录执行：

npm run dev:mp-weixin

生成的代码会出现在 /dist/dev/mp-weixin，用微信开发者工具导入该目录。

H5 模式 启动本地开发服务器：

npm run serve

访问 http://localhost:8080 即可预览。

App 模式 需使用 HBuilderX 进行真机调试：

1. 通过菜单栏选择「运行」→「运行到手机或模拟器」
2. 连接设备后选择目标平台

生产环境构建

小程序打包 执行对应平台的构建命令：

npm run build:mp-weixin

产物位于 /dist/build/mp-weixin。

H5 部署 生成静态文件：

npm run build

将 /dist/build/h5 目录部署到 Web 服务器。

调试工具配置

浏览器调试 H5 模式下可使用 Vue Devtools，需安装浏览器插件。

小程序调试 各平台开发者工具内置调试功能：

• 微信开发者工具支持 Network、Console 和 Element 审查
• 支付宝小程序工具提供性能分析功能

跨端兼容处理 使用条件编译处理平台差异：

// #ifdef MP-WEIXIN
console.log('微信特有逻辑');
// #endif

常见问题处理

依赖安装失败 尝试切换 npm 源或使用 cnpm：

npm config set registry https://registry.npmmirror.com

白屏问题 检查路由模式是否为 history，静态资源路径是否正确。

API 兼容性 通过 uni.canIUse() 检查 API 支持情况，必要时使用 polyfill。