vscode运行开发uniapp项目

1. 环境准备

安装 Node.js
确保已安装 Node.js（建议使用 LTS 版本）。下载地址：Node.js 官网。
安装 VSCode
下载并安装最新版 VSCode：VSCode 官网。
安装 HBuilderX（可选但推荐）
UniApp 官方推荐使用 HBuilderX，但 VSCode 也可通过插件支持。
下载地址：HBuilderX 官网。

2. 创建 UniApp 项目

通过命令行创建
打开终端（VSCode 的集成终端或系统终端），运行以下命令：

bash 复制代码

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 Sass：CSS 预处理器支持
推荐插件
- ESLint：代码规范检查
- GitLens：Git 增强

4. 项目配置

安装依赖
在项目根目录运行：
bash 复制代码
```
npm install
```
配置 manifest.json
在项目根目录的 manifest.json 中配置应用名称、AppID 等基本信息。
配置 pages.json
管理页面路由和导航栏样式。

5. 运行项目

启动开发服务器
在终端运行以下命令（根据目标平台选择）：
bash 复制代码
```
npm run dev:%PLATFORM%  # 例如：npm run dev:h5
```
支持的平台包括：h5、mp-weixin（微信小程序）、mp-alipay（支付宝小程序）等。
调试小程序
微信小程序需配合微信开发者工具：
1. 运行 npm run dev:mp-weixin
2. 在微信开发者工具中导入项目（路径：dist/dev/mp-weixin）

6. 代码示例

页面结构示例

vue 复制代码

<template>
  <view class="container">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello UniApp!"
    };
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

7. 常见问题解决

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

bash 复制代码

npm config set registry https://registry.npm.taobao.org
yarn install  # 需先全局安装 yarn: npm i -g yarn

H5 页面空白
检查 vue.config.js 中的 publicPath 配置：
js 复制代码
```
module.exports = {
  publicPath: './'
};
```

8. 调试技巧

使用 Chrome 调试 H5
直接访问 http://localhost:8080（端口可能不同）。

VSCode 断点调试
安装插件 Debugger for Chrome，配置 .vscode/launch.json：

json 复制代码

{
  "type": "chrome",
  "request": "launch",
  "name": "UniApp H5 Debug",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}"
}