【AI 编程实战】第 2 篇：让 AI 成为你的前端架构师 - UniApp + Vue3 项目初始化

传统方式搭建前端项目：查文档、试错、调试，耗时 1 天起步。AI 辅助：对话式配置，1 小时搞定。这是《AI 编程实战：TRAE SOLO 全栈开发指南》专栏的第二篇文章，带你用 AI 快速搭建专业级前端项目架构。

一、开篇：为什么项目初始化这么让人头疼？

还记得上一篇文章里提到的小何吗？他在"心动恋聊"项目中遇到的第一个挑战，就是前端项目初始化。

1.1 传统方式的痛点

如果你做过前端项目，一定深有体会：

技术选型迷茫：

UniApp vs Taro vs 原生？
Vue3 还是 React？
Vite 还是 Webpack？
UnoCSS 还是 Tailwind CSS？

每个选择背后都是无数的文档、博客、踩坑记录。光是技术选型，就能让人纠结半天。

配置地狱：

vite.config.ts
tsconfig.json
uno.config.ts
.eslintrc.js
.prettierrc
pages.json
manifest.json
...

每一个配置文件都有自己的语法、规则、坑点。配置完一个，还有下一个在等着你。

时间黑洞：

小何最初的估算：

任务	预计时间
技术调研	2 小时
项目创建	0.5 小时
Vite 配置	1 小时
TypeScript 配置	1 小时
UI 框架集成	2 小时
自动导入配置	1 小时
路由配置	1 小时
环境变量配置	0.5 小时
代码规范配置	2 小时
总计	11 小时

实际上，因为各种问题、版本冲突、配置不兼容，往往需要 1.5-2 天。

1.2 AI 辅助的革命性变化

有了 TRAE SOLO，一切都不同了。

小何的实际体验：

小何：帮我创建一个 UniApp + Vue3 + TypeScript 项目，
      使用 Vite 构建，支持微信小程序、H5、App 三端，
      集成 UnoCSS 和 UView Pro 组件库

AI：好的，我来帮你搭建完整的项目架构：

    ✓ 分析需求，确定技术选型
    ✓ 创建 Monorepo 项目结构
    ✓ 配置 Vite 构建工具
    ✓ 集成 TypeScript 严格模式
    ✓ 配置 UnoCSS 原子化 CSS
    ✓ 集成 UView Pro 组件库
    ✓ 设置自动导入
    ✓ 配置多环境变量
    ✓ 添加代码规范工具

    项目结构已生成，请查看...

一天的工作，不到一小时完成。 这就是 AI 辅助开发的魔力。

二、技术选型：让 AI 帮你做决策

2.1 框架对比分析

项目开始前，小何需要确定技术选型。传统做法是搜索各种博客文章、技术对比，然后纠结半天。

TRAE SOLO 的做法：

小何：帮我对比 UniApp、Taro、原生小程序的优劣，
      项目需求：社交类小程序，需要支持微信小程序、H5、App 三端

AI：（通过 MCP 实时查阅最新文档）

      分析结论：

      1. UniApp 优势：
         - 一套代码，支持微信/H5/App/鸿蒙等多端
         - Vue3 技术栈，学习成本低
         - 生态完善，组件库丰富
         - 文档完善，社区活跃

      2. Taro 优势：
         - React 技术栈友好
         - 适合已有 React 经验的团队

      3. 原生小程序：
         - 性能最优
         - 但只能在单一平台运行

      推荐：UniApp + Vue3

      理由：
      1. 项目需要三端发布，UniApp 跨端能力最强
      2. 社交类应用迭代快，UniApp 开发效率高
      3. 后续还要扩展到鸿蒙、安卓、iOS，UniApp 支持最全

5 分钟，得到了专业级的技术选型分析报告。

2.2 构建工具选择

小何：UniApp 应该用 Vite 还是 Webpack？

AI：强烈推荐 Vite！

      对比分析：
      ┌────────────┬────────────────┬────────────────┐
      │   维度     │     Vite       │    Webpack     │
      ├────────────┼────────────────┼────────────────┤
      │ 冷启动     │ 毫秒级         │ 秒级           │
      │ 热更新     │ 即时           │ 有延迟         │
      │ 配置复杂度 │ 简单           │ 复杂           │
      │ 生态支持   │ 完善           │ 非常完善       │
      │ 构建速度   │ 快             │ 较慢           │
      └────────────┴────────────────┴────────────────┘

      实测数据（心动恋聊项目）：
      - Vite 冷启动：1.2 秒
      - Webpack 冷启动：8.5 秒

      结论：Vite 开发体验完胜，选它！

2.3 最终技术栈确定

通过 AI 辅助分析，"心动恋聊"项目确定了以下技术栈：

前端技术栈：
├── 框架：UniApp + Vue 3.4.21
├── 构建工具：Vite 5.2.8
├── 语言：TypeScript 5.7
├── 状态管理：Pinia 2.0.36 + 持久化
├── 原子化 CSS：UnoCSS 66.0
├── UI 组件库：UView Pro
├── HTTP 请求：自定义封装（基于 uni.request）
├── 列表优化：z-paging 2.8.7
└── 数据请求：@tanstack/vue-query

三、项目初始化：AI 一键生成

3.1 Monorepo 项目结构

"心动恋聊"采用 Monorepo 架构，这是现代前端项目的最佳实践。

提示词：

帮我创建一个 Monorepo 项目结构，包含：
1. apps/unibest-mp - UniApp 小程序端
2. apps/xindong-server - Next.js 服务端
3. packages/shared-types - 共享类型定义
使用 pnpm 管理依赖，Turborepo 编排任务

AI 生成的项目结构：

xingdong/
├── apps/
│   ├── unibest-mp/              # UniApp 多端应用
│   │   ├── src/
│   │   │   ├── api/             # API 接口定义
│   │   │   ├── components/      # 公共组件
│   │   │   ├── composables/     # 组合式函数
│   │   │   ├── config/          # 配置文件
│   │   │   ├── hooks/           # 自定义 Hooks
│   │   │   ├── http/            # HTTP 请求封装
│   │   │   ├── layouts/         # 布局组件
│   │   │   ├── pages/           # 页面文件
│   │   │   ├── store/           # Pinia 状态管理
│   │   │   ├── subPackages/     # 分包页面
│   │   │   │   ├── agreement/   # 协议相关
│   │   │   │   ├── vip/         # 会员相关
│   │   │   │   └── planForm/    # 计划表单
│   │   │   ├── tabbar/          # 底部导航
│   │   │   └── utils/           # 工具函数
│   │   ├── env/                 # 环境变量
│   │   ├── vite.config.ts       # Vite 配置
│   │   └── package.json
│   │
│   └── xingdong-server/         # Next.js 服务端
│       ├── src/
│       │   └── app/             # App Router
│       └── package.json
│
├── packages/
│   └── shared-types/            # 共享类型定义
│       ├── src/
│       │   └── index.ts
│       └── package.json
│
├── pnpm-workspace.yaml          # pnpm 工作区配置
├── turbo.json                   # Turborepo 配置
└── package.json                 # 根配置

pnpm-workspace.yaml：

packages:
  - apps/*
  - packages/*

turbo.json：

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["apps/unibest-mp/dist/**", "apps/xingdong-server/.next/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

这个结构的好处：

1. 代码复用：shared-types 包让前后端类型一致
2. 独立开发：前后端可以独立启动、独立部署
3. 并行构建：Turborepo 自动并行执行不相关的任务

3.2 配置 Vite

Vite 配置是前端项目的核心。让我们看看 AI 生成的实际配置：

提示词：

帮我配置 UniApp 的 Vite 配置文件，需要：
1. 自动导入 Vue API
2. 自动导入 uni-app API
3. 自动导入自定义 hooks
4. 配置路径别名
5. 支持多环境变量
6. 集成 UnoCSS
7. 配置分包优化

生成的 vite.config.ts（实际项目配置）：

// vite.config.ts 核心配置片段
export default ({ command, mode }) => {
  // ... 环境变量加载逻辑 ...

  return defineConfig({
    plugins: [
      // 1. 页面路由自动生成
      UniPages({
        exclude: ['**/components/**/**.*'],
        subPackages: [
          'src/subPackages/agreement',
          'src/subPackages/vip',
          'src/subPackages/planForm',
        ],
      }),

      // 2. 布局系统 & 平台适配
      UniLayouts(),
      UniPlatform(),
      UniManifest(),

      // 3. 修复 Vue 编译问题（AI 自动生成的补丁）
      {
        name: 'fix-vite-plugin-vue',
        configResolved(config) {
          const plugin = config.plugins.find((p) => p.name === 'vite:vue');
          if (plugin && plugin.api && plugin.api.options) {
            plugin.api.options.devToolsEnabled = false;
          }
        },
      },

      // 4. UnoCSS 原子化 CSS
      UnoCSS(),

      // 5. 自动导入
      AutoImport({
        imports: ['vue', 'uni-app'],
        dirs: ['src/hooks'],
        vueTemplate: true,
      }),

      // ... 其他插件
      Uni(),
    ],
    // ...
  });
};

这个配置包含了：

1. @uni-helper 插件生态：页面路由、布局、平台、manifest 全自动化
2. UnoCSS：原子化 CSS，开发效率翻倍
3. AutoImport：Vue API、uni-app API、自定义 hooks 自动导入
4. Hack 修复 ：AI 甚至帮我生成了一个 fix-vite-plugin-vue 插件来解决特定的编译 Bug，这在传统开发中可能要排查半天。

3.3 TypeScript 配置

提示词：

帮我配置 TypeScript 严格模式，确保类型安全，支持 Vue3 和 uni-app

生成的配置：

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "jsxImportSource": "vue",
    "paths": {
      "@/*": ["./src/*"],
      "@img/*": ["./src/static/images/*"]
    },
    "types": ["@dcloudio/types", "@uni-helper/uni-types", "miniprogram-api-typings"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"]
}

四、UI 框架集成：UnoCSS + UView Pro

4.1 UnoCSS 配置：AI 也会"翻车"

UnoCSS 是原子化 CSS 的最佳选择，但在小程序环境中使用时，AI 一开始给出的配置并不完美。

第一次尝试：

小何：配置 UnoCSS
AI：生成了标准的 Web 端配置（presetUno）。
结果：小程序端样式完全不生效。

修正后的交互：

小何：这个配置在微信小程序里不生效，请检查是否需要专用预设？

AI：抱歉，你是对的。在 UniApp 中需要使用 `@uni-helper/unocss-preset-uni`。
    我已更新配置：

最终生成的 uno.config.ts：

import { defineConfig, presetIcons } from 'unocss';
import { presetUni } from '@uni-helper/unocss-preset-uni';

export default defineConfig({
  presets: [
    // 使用 UniApp 专用预设，解决小程序兼容性问题
    presetUni({
      attributify: {
        prefixedOnly: true, // 避免属性冲突
      },
    }),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
  ],
  theme: {
    colors: {
      // 使用 CSS 变量，支持动态换肤
      primary: 'var(--wot-color-theme,#0957DE)',
    },
  },
});

这里的重点是 presetUni 和 prefixedOnly，这是 AI 在被指出错误后迅速修正的关键点。

UnoCSS 的优势：

<!-- 传统 CSS 写法 -->
<template>
  <view class="container">
    <text class="title">心动恋聊</text>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b9d;
}
</style>

<!-- UnoCSS 写法 -->
<template>
  <view class="flex-center p-4">
    <text class="text-24px font-bold text-primary">心动恋聊</text>
  </view>
</template>

代码量减少 70%，开发效率大幅提升！

4.2 UView Pro 集成

UView Pro 是 UniApp 最好用的组件库之一。

提示词：

帮我集成 UView Pro 组件库，配置按需导入和主题定制

package.json 依赖：

{
  "dependencies": {
    "uview-pro": "^0.0.3"
  }
}

组件使用示例：

<template>
  <view class="page">
    <!-- 导航栏 -->
    <u-navbar title="心动恋聊" :placeholder="true" />

    <!-- 表单 -->
    <u-form ref="formRef" :model="formData" :rules="rules">
      <u-form-item label="昵称" prop="nickname">
        <u-input v-model="formData.nickname" placeholder="请输入昵称" />
      </u-form-item>
      <u-form-item label="性别" prop="gender">
        <u-radio-group v-model="formData.gender">
          <u-radio label="男" :name="1" />
          <u-radio label="女" :name="2" />
        </u-radio-group>
      </u-form-item>
    </u-form>

    <!-- 按钮 -->
    <u-button type="primary" @click="handleSubmit">提交</u-button>

    <!-- 弹窗 -->
    <u-popup v-model:show="showPopup" mode="bottom">
      <view class="p-4">弹窗内容</view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
const formRef = ref();
const showPopup = ref(false);

const formData = reactive({
  nickname: '',
  gender: 1,
});

const rules = {
  nickname: [{ required: true, message: '请输入昵称' }],
  gender: [{ required: true, message: '请选择性别' }],
};

const handleSubmit = async () => {
  const valid = await formRef.value.validate();
  if (valid) {
    // 提交逻辑
  }
};
</script>

五、自动导入配置：提升开发体验

5.1 Vue API 自动导入

传统写法每个文件都要导入：

// 传统写法
import { ref, reactive, computed, watch, onMounted } from 'vue';

const count = ref(0);
const state = reactive({ name: '' });

配置自动导入后：

// 自动导入后，直接使用
const count = ref(0);
const state = reactive({ name: '' });
const double = computed(() => count.value * 2);

onMounted(() => {
  console.log('mounted');
});

AutoImport 配置：

AutoImport({
  imports: ['vue', 'uni-app'],
  dts: 'src/types/auto-import.d.ts',
  dirs: ['src/hooks'],
  vueTemplate: true,
});

这会自动生成类型声明文件 src/types/auto-import.d.ts：

// Auto generated by unplugin-auto-import
export {};
declare global {
  const computed: (typeof import('vue'))['computed'];
  const onMounted: (typeof import('vue'))['onMounted'];
  const onUnmounted: (typeof import('vue'))['onUnmounted'];
  const reactive: (typeof import('vue'))['reactive'];
  const ref: (typeof import('vue'))['ref'];
  const watch: (typeof import('vue'))['watch'];
  // uni-app APIs
  const onLaunch: (typeof import('uni-app'))['onLaunch'];
  const onShow: (typeof import('uni-app'))['onShow'];
  const onHide: (typeof import('uni-app'))['onHide'];
  // ... 更多
}

5.2 自定义 Hooks 自动导入

在 src/hooks/ 目录下创建的 hooks 也会自动导入：

src/hooks/useRequest.ts：

import type { Ref } from 'vue';

interface UseRequestOptions<T> {
  immediate?: boolean;
  onSuccess?: (data: T) => void;
  onError?: (error: Error) => void;
}

export function useRequest<T>(fn: () => Promise<T>, options: UseRequestOptions<T> = {}) {
  const { immediate = false, onSuccess, onError } = options;

  const data: Ref<T | null> = ref(null);
  const loading = ref(false);
  const error = ref<Error | null>(null);

  const execute = async () => {
    loading.value = true;
    error.value = null;
    try {
      data.value = await fn();
      onSuccess?.(data.value);
    } catch (e) {
      error.value = e as Error;
      onError?.(error.value);
    } finally {
      loading.value = false;
    }
  };

  if (immediate) {
    execute();
  }

  return { data, loading, error, execute };
}

使用时无需导入：

<script setup lang="ts">
// 直接使用，无需 import
const { data, loading, execute } = useRequest(() => apiGetUserInfo(), { immediate: true });
</script>

5.3 组件自动注册

配置 @uni-helper/vite-plugin-uni-components 后，组件也自动注册：

Components({
  extensions: ['vue'],
  deep: true,
  directoryAsNamespace: false,
  dts: 'src/types/components.d.ts',
});

src/components/UserCard.vue：

<template>
  <view class="user-card">
    <image :src="user.avatar" class="avatar" />
    <text class="name">{{ user.name }}</text>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  user: {
    avatar: string;
    name: string;
  };
}>();
</script>

使用时无需注册：

<template>
  <!-- 直接使用，无需 import 和 components 注册 -->
  <UserCard :user="userInfo" />
</template>

六、路由配置：pages.json 优化

6.1 页面路由自动生成

使用 @uni-helper/vite-plugin-uni-pages，页面路由可以自动生成。

在页面文件中配置路由：

<!-- src/pages/index/index.vue -->
<route lang="json">
{
  "style": {
    "navigationBarTitleText": "首页"
  }
}
</route>

<template>
  <view class="page">
    <!-- 页面内容 -->
  </view>
</template>

自动生成的 pages.json：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "subPackages": [
    {
      "root": "subPackages/agreement",
      "pages": [
        {
          "path": "privacy",
          "style": { "navigationBarTitleText": "隐私协议" }
        },
        {
          "path": "user-agreement",
          "style": { "navigationBarTitleText": "用户协议" }
        }
      ]
    },
    {
      "root": "subPackages/vip",
      "pages": [
        {
          "path": "index",
          "style": { "navigationBarTitleText": "会员中心" }
        }
      ]
    }
  ],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#FF6B9D",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tabbar/my.png",
        "selectedIconPath": "static/tabbar/my-active.png"
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "心动恋聊",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#F5F5F5"
  }
}

6.2 分包配置

小程序有包体积限制（主包 2MB，总包 20MB），分包是必须的。

配置分包：

// vite.config.ts
UniPages({
  exclude: ['**/components/**/**.*'],
  dts: 'src/types/uni-pages.d.ts',
  subPackages: [
    'src/subPackages/agreement', // 协议相关页面
    'src/subPackages/vip', // 会员相关页面
    'src/subPackages/planForm', // 计划表单页面
  ],
});

分包优化插件：

// @uni-ku/bundle-optimizer 自动优化
Optimization({
  enable: {
    optimization: true, // 开启优化
    'async-import': true, // 异步导入
    'async-component': true, // 异步组件
  },
  dts: {
    base: 'src/types',
  },
});

七、环境变量配置

7.1 多环境配置

"心动恋聊"项目支持多环境、多项目配置：

目录结构：

env/
├── .env                           # 基础配置
├── .env.development               # 开发环境
└── .env.production                # 生产环境

.env.development：

 # 基础配置
 VITE_APP_PORT=5173
 VITE_APP_PUBLIC_BASE=/

 # API 配置
 VITE_SERVER_BASEURL=http://localhost:3000
 VITE_APP_PROXY=true

 # 业务配置
 VITE_APP_SOURCE_ID=your_source_id
 VITE_APP_CHANNEL_ID=weixin

7.2 环境变量使用

在代码中使用：

// 直接使用
const apiBaseUrl = import.meta.env.VITE_SERVER_BASEURL;
const sourceId = import.meta.env.VITE_APP_SOURCE_ID;

// 类型安全
interface ImportMetaEnv {
  VITE_APP_PORT: string;
  VITE_SERVER_BASEURL: string;
  VITE_APP_SOURCE_ID: string;
  VITE_APP_CHANNEL_ID: string;
  VITE_APP_BRAND_KEY: string;
}

启动命令：

{
  "scripts": {
    "dev:mp": "uni -p mp-weixin --mode development",
    "build:mp": "uni build -p mp-weixin --mode production"
  }
}

八、代码规范配置

8.1 ESLint 配置

提示词：

配置 ESLint，适合 Vue3 + TypeScript + UniApp 项目

使用 @uni-helper/eslint-config：

// eslint.config.js
import uniHelper from '@uni-helper/eslint-config';

export default uniHelper({
  typescript: true,
  vue: true,
  unocss: true,
});

8.2 Prettier 配置

// .prettierrc
{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "tabWidth": 2,
  "endOfLine": "lf"
}

8.3 Git Hooks

// package.json
{
  "lint-staged": {
    "*": "eslint --fix"
  }
}

九、实战演示：首页核心逻辑开发

"心动恋聊"的首页并不是一个简单的展示页，它包含了一个复杂的交互逻辑：文字/图片输入模式切换。

9.1 需求描述

小何：首页需要一个输入区域，支持两种模式：
1. 文字模式：输入对方说的话。
2. 图片模式：上传聊天截图。

切换模式时，输入框和上传区域要互斥显示。
并且需要一个"清除记忆"的功能，但只在文字模式下显示。

9.2 AI 的逐步实现

这是一个涉及状态管理、UI 交互和业务逻辑的复杂需求。AI 是如何一步步实现的呢？

第一步：定义状态

AI 首先定义了核心的响应式状态：

// src/pages/index/index.vue
const showUploadArea = ref(false); // 控制模式切换
const inputText = ref(''); // 文字输入
const selectedImages = ref([]); // 图片列表

// 切换模式逻辑
const toggleInputMode = () => {
  showUploadArea.value = !showUploadArea.value;
  // 切换时清空状态，避免数据混淆
  if (showUploadArea.value) {
    inputText.value = '';
  } else {
    selectedImages.value = [];
  }
};

第二步：构建动态 UI

利用 Vue 的 v-if/v-show 指令处理复杂的显示逻辑：

<template>
  <!-- 模式切换按钮 -->
  <view class="flex justify-between items-center">
    <text>{{ showUploadArea ? '与Ta的聊天截图：' : 'Ta说：' }}</text>
    <view @click="toggleInputMode">
      <text>{{ showUploadArea ? '切换文字' : '切换图片' }}</text>
    </view>
  </view>

  <!-- 上传区域 (图片模式) -->
  <view v-show="showUploadArea" class="upload-area">
    <ImageGrid :images="selectedImages" @add="addImages" />
  </view>

  <!-- 输入框 (文字模式) -->
  <view v-show="!showUploadArea" class="input-wrapper">
    <u-input type="textarea" v-model="inputText" :autoHeight="true" />
  </view>

  <!-- 清除记忆 (仅文字模式) -->
  <view v-if="!showUploadArea" class="clear-memory-btn" @click="handleClearMemory">
    <text>清除记忆</text>
  </view>
</template>

第三步：处理业务逻辑

生成回复时，需要根据当前模式调用不同的接口：

const handleGenerate = async () => {
  // 1. 鉴权检查
  if (!(await checkAuth())) return;

  // 2. 模式判断
  if (showUploadArea.value) {
    // 图片模式逻辑
    if (selectedImages.value.length === 0) return toast.info('请上传截图');
    await generateByImage(selectedImages.value);
  } else {
    // 文字模式逻辑
    if (!inputText.value.trim()) return toast.info('请输入内容');
    // 调用带记忆的接口
    await generateByText({
      text: inputText.value,
      sessionId: chatSessionStore.sessionId,
    });
  }
};

9.3 真实代码片段

最终生成的代码不仅逻辑清晰，还处理了很多细节，比如 iOS 的样式适配：

// 适配 iOS 的输入框样式
const inputCustomStyle = computed(() => {
  const isIOS = systemInfo?.platform === 'ios';
  return {
    padding: isIOS ? '12rpx' : '20rpx',
    minHeight: '240rpx',
    borderRadius: '12px',
  };
});

这就是 AI 辅助开发的威力：它不仅能写出跑通的代码，还能考虑到平台差异和边界情况。

9.3 运行测试

# 微信小程序
pnpm --filter unibest-mp dev:mp

# H5
pnpm --filter unibest-mp dev:h5

# App
pnpm --filter unibest-mp dev:app

十、总结与下一步

10.1 本篇完成的工作

通过 AI 辅助，我们在 不到 1 小时 内完成了：

任务	完成情况
✅ Monorepo 项目结构	标准的 pnpm + Turborepo 架构
✅ Vite 配置	完整的插件链和优化配置
✅ TypeScript 配置	严格模式，完整类型支持
✅ UnoCSS 集成	原子化 CSS，主题定制
✅ UView Pro 集成	组件库完整接入
✅ 自动导入配置	Vue API、uni-app API、Hooks
✅ 路由系统	自动生成，分包优化
✅ 环境变量	多环境、多项目支持
✅ 代码规范	ESLint + Prettier
✅ 首页开发	完整的页面实现

10.2 核心提示词模板

项目初始化：

创建 [框架] + [技术栈] 项目，
包含 [目录结构]，
配置 [构建工具]

配置文件生成：

配置 [工具名称]，需要：
1. [功能点 1]
2. [功能点 2]
3. [功能点 3]

页面生成：

创建 [页面名称]，包括：
- [功能描述]
使用 [UI 框架] 和 [样式方案]

10.4 下一篇预告

《【AI 编程实战】第 3 篇：AI 辅助后端开发 - Next.js 15 API 快速搭建》

我们将学习：

• Next.js 15 App Router 架构
• Prisma ORM 数据库操作
• RESTful API 设计
• JWT 认证中间件
• 前后端类型共享

关注我，不错过每一篇实战干货！

---

如果这篇文章对你有帮助，请点赞、收藏、转发，让更多人了解 AI 编程的强大！

有任何问题，欢迎在评论区留言，我们一起讨论。