使用vscode开发的详细教程，从零开始（Qwen3-Max）

以下是一份 从零开始使用 VS Code 开发“报告超市”H5 前端项目（Vue 3 + Vite + Vant） 的详细教程，涵盖环境搭建、项目初始化、插件配置、接口调试、移动端适配到本地预览全流程。

🧱 第一步：安装基础工具

1. 安装 Node.js（推荐 v20.x LTS）

• 官网下载：https://nodejs.org/

• 推荐使用 Node.js 20.18.0 LTS（2025 年稳定版）

• 验证安装：

  node -v  # 应输出 v20.x.x
  npm -v   # 应 ≥ 10.x
  
  

💡 建议用 nvm 管理多版本（可选）

2. 安装 VS Code

• 官网下载：https://code.visualstudio.com/
• 安装后打开 VS Code

🧰 第二步：安装必备 VS Code 插件

在 VS Code 左侧点击 Extensions（扩展）图标（或 Ctrl+Shift+X），搜索并安装以下插件：

✅ 安装后重启 VS Code

🌱 第三步：创建 Vue 3 + Vite 项目

打开终端（VS Code 内按 `Ctrl+``），执行：

npm create vue@latest report-market-h5

交互式配置如下（按需调整）：

✔ Project name: … report-market-h5
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes

进入项目并安装依赖：

cd report-market-h5
npm install

📦 第四步：安装 UI 组件库（Vant）

npm install vant@^4.0.0 @vant/use

Vant 4 是专为 Vue 3 设计的移动端组件库

⚙️ 第五步：配置项目（关键步骤）

1. 配置 Vant 按需引入（推荐）

安装插件：

npm install unplugin-vue-components -D

修改 vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
})

✅ 这样你就可以直接在组件中使用 <van-button> 而无需手动 import！

2. 配置移动端适配（px → vw）

安装插件：

npm install postcss-px-to-viewport -D

创建 postcss.config.js：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 设计稿宽度（假设是 iPhone 6/7/8 尺寸）
      viewportHeight: 667,
      unitPrecision: 6,
      viewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      exclude: [],
    }
  }
}

✅ 以后写 font-size: 16px 会自动转为 4.266667vw

3. 配置 Axios 和 API 封装

安装 axios：

npm install axios

创建 src/utils/request.ts：

import axios from 'axios'

const request = axios.create({
  baseURL: 'https://api.your-backend.com', // 替换为你的后端地址
  timeout: 10000,
})

// 请求拦截器
request.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器
request.interceptors.response.use(
  response => response.data,
  error => {
    console.error('API Error:', error)
    return Promise.reject(error)
  }
)

export default request

创建 src/api/auth.ts 示例：

import request from '@/utils/request'

export const sendSms = (phone: string) => {
  return request.post('/user/send-sms', { phone })
}

export const register = (data: { phone: string; code: string }) => {
  return request.post('/user/register', data)
}

📄 第六步：创建页面（以“注册页”为例）

1. 创建视图组件

src/views/Register.vue：

<template>
  <div class="register-page">
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="phone"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="smsCode"
        name="smsCode"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <van-button
            size="small"
            :disabled="countdown > 0"
            @click="sendCode"
          >
            {{ countdown > 0 ? `${countdown}s 后重试` : '获取验证码' }}
          </van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { sendSms, register } from '@/api/auth'
import { showToast } from 'vant'

const phone = ref('')
const smsCode = ref('')
const countdown = ref(0)

const sendCode = async () => {
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    showToast('手机号格式错误')
    return
  }
  await sendSms(phone.value)
  showToast('验证码已发送')
  let time = 60
  countdown.value = time
  const timer = setInterval(() => {
    if (--time <= 0) {
      clearInterval(timer)
      countdown.value = 0
    }
  }, 1000)
}

const onSubmit = async (values: any) => {
  await register(values)
  showToast('注册成功！')
  // 跳转首页等逻辑...
}
</script>

<style scoped>
.register-page {
  padding: 20px;
}
</style>

2. 配置路由

编辑 src/router/index.ts：

import { createRouter, createWebHashHistory } from 'vue-router'
import Register from '@/views/Register.vue'

const routes = [
  { path: '/', redirect: '/register' },
  { path: '/register', component: Register },
  // 其他 8 个页面...
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

🔌 第七步：调试接口（使用 REST Client）

1. 在项目根目录创建 api.http 文件：

### 发送短信验证码
POST https://api.your-backend.com/user/send-sms
Content-Type: application/json

{
  "phone": "13800138000"
}

### 用户注册
POST https://api.your-backend.com/user/register
Content-Type: application/json

{
  "phone": "13800138000",
  "code": "123456"
}

2. 点击请求上方的 Send Request，结果会显示在右侧！

✅ 无需 Postman，直接在 VS Code 调试全部 13 个接口

▶️ 第八步：启动开发服务器

终端运行：

npm run dev

输出类似：

  VITE v5.0.0  ready in 320 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/

• 在 手机浏览器 打开 http://你的电脑IP:5173 即可真机预览！
• 修改代码自动热更新

📱 第九步：真机调试技巧

1. 确保手机和电脑在同一 WiFi

2. 使用 Chrome DevTools 远程调试：

   • Android：Chrome 地址栏输入 chrome://inspect
   • iOS：Mac Safari 开启“开发菜单” → 查看设备

3. 或集成 vConsole（开发环境）：

   npm install vconsole
   
   

   在 main.ts 中：

   if (import.meta.env.DEV) {
     const VConsole = await import('vconsole')
     new VConsole.default()
   }
   
   

🚀 第十步：构建与部署

npm run build

生成 dist/ 目录，将内容上传至：

• 阿里云 OSS + CDN
• Vercel / Netlify（免费）
• Nginx 服务器

Nginx 配置示例（支持 hash 路由）：

location / {
  try_files $uri $uri/ /index.html;
}

✅ 总结：你的完整技术栈