1.环境准备安装 Node.js确保已安装 Node.js建议使用 LTS 版本。下载地址Node.js 官网。安装 VSCode下载并安装最新版 VSCodeVSCode 官网。安装 HBuilderX可选但推荐UniApp 官方推荐使用 HBuilderX但 VSCode 也可通过插件支持。下载地址HBuilderX 官网。2.创建 UniApp 项目通过命令行创建打开终端VSCode 的集成终端或系统终端运行以下命令npm install -g vue/cli # 安装 Vue CLI vue create -p dcloudio/uni-preset-vue my-project # 创建项目 cd my-project选择模板根据提示选择模板如默认模板、uni-ui 模板等。3.VSCode 插件安装必装插件在 VSCode 扩展商店中搜索并安装uni-app-snippets代码片段提示uni-app-vscode语法高亮和调试支持Easy LESS/Easy SassCSS 预处理器支持推荐插件ESLint代码规范检查GitLensGit 增强4.项目配置安装依赖在项目根目录运行npm install配置manifest.json在项目根目录的manifest.json中配置应用名称、AppID 等基本信息。配置pages.json管理页面路由和导航栏样式。5.运行项目启动开发服务器在终端运行以下命令根据目标平台选择npm run dev:%PLATFORM% # 例如npm run dev:h5支持的平台包括h5、mp-weixin微信小程序、mp-alipay支付宝小程序等。调试小程序微信小程序需配合微信开发者工具运行npm run dev:mp-weixin在微信开发者工具中导入项目路径dist/dev/mp-weixin6.代码示例页面结构示例template view classcontainer text{{ message }}/text /view /template script export default { data() { return { message: Hello UniApp! }; } }; /script style .container { padding: 20px; } /style7.常见问题解决依赖安装失败尝试切换 npm 源或使用yarnnpm config set registry https://registry.npm.taobao.org yarn install # 需先全局安装 yarn: npm i -g yarnH5 页面空白检查vue.config.js中的publicPath配置module.exports { publicPath: ./ };8.调试技巧使用 Chrome 调试 H5直接访问http://localhost:8080端口可能不同。VSCode 断点调试安装插件Debugger for Chrome配置.vscode/launch.json{ type: chrome, request: launch, name: UniApp H5 Debug, url: http://localhost:8080, webRoot: ${workspaceFolder} }