掌握Trae AI 如何搭建移动端页面至关重要。今天，我们就以 uni-app 为基础，使用 AI Trae + Claude-3.7 Sonnet 构建 Vite，并引用 tdesign 和 Vant，从零开始搭建一个移动端登录页面。

关注点击小爱心

输入你想要的实现的功能，告诉 AI 大模型自动会帮你构建代码，也可以选择不同大模型：

  1. Claude-3.5 Sonnet
  2. Claude-3.7 Sonnet 最新版本
  3. DeepSeek-Reasoner (R1)
  4. DeepSeek-Chat  (V3)
     
发布需求

把你的需求告诉它，比如让它构建 Vite使用 uni-app 引用 Tdesign 和 Vant组件库 自动构建
 

Builder模式
Builder模式可以从0帮你构建一个完整的项目，自动编写代码，在生成的过程中，它也会向你询问一些

意见，比如它生成了一行命令它会询问你“是否需要运行这行命令？”，你只需要点击即可

使用Builder模式
如何使用Builder模式呢？当然也是Command+U打开侧边栏，之后点击最上面的Builder，即可切换到Builder模式

一、项目初始化（含代码演示）

  1. 环境搭建

    • 安装HBuilderX（官网下载开发版）

    • 新建uni-app项目 → 选择Vue3/Vite模板

    • 安装 Trae - AI 原生 IDE 编辑开发工具

    • 用Trae AI编辑工具打开uni-app项目

    • 终端执行：npm create vite@latest → 选择Vue框架

  2. 环境准备
    • 确保 Node.js 版本为 ^14.18.0 || >=16.0.0（Vite 要求）6。

    • 使用 npx degit 命令创建项目模板：

      # 创建 JavaScript 项目
npx degit dcloudio/uni-preset-vue#vite my-uniapp-project
# 或创建 TypeScript 项目
npx degit dcloudio/uni-preset-vue#vite-ts my-uniapp-project
    • 若网络问题无法下载，可手动从 Gitee 模板链接 下载并解压。
  3. 安装依赖并运行
    cd my-uniapp-project
npm install
# 运行到微信小程序
npm run dev:mp-weixin

二、集成 Vant 组件库

1.安装 Vant   

Vant 轻量、可定制的移动端 Vue 组件库

npm install vant@latest --save

若出现版本冲突（如 Vue 2/3 不兼容），可指定版本或添加 --force/--legacy-peer-deps 参数。

2.配置自动按需引入

  • 在 pages.json 中配置 easycom 规则：

    {
  "easycom": {
    "autoscan": true,
    "custom": {
      "^van-(.*)": "vant/es/$1/index"
    }
  }
}
3.全局引入样式

  • 在 App.vue 的 <style> 标签中引入 Vant 基础样式：

    @import 'vant/lib/index.css';
4.使用组件

在登录login.vue 适用van按钮是不是有效果正常显示

<template>
  <van-button type="primary">Vant 按钮</van-button>
</template>

三、集成 TDesign Mobile Vue 组件库 TDesign - 开源的企业级设计体系，为设计师 & 开发者，打造工作美学

1、安装 TDesign
npm install tdesign-mobile-vue --save
2、配置自动按需引入
  • 安装 unplugin-vue-components 插件：
npm install unplugin-vue-components -D
  • 在 vite.config.js 中添加插件配置：
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [TDesignResolver({
        library: 'mobile-vue'
      })]
    })
  ]
});
3、全局引入样式

  • 在 App.vue 中引入 TDesign 样式：

    @import 'tdesign-mobile-vue/dist/style.css';
4、使用组件
<template>
  <t-button theme="primary">TDesign 按钮</t-button>
</template>

四、完整示例代码

  • vite.config.js
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    uni(),
    Components({
      resolvers: [TDesignResolver({ library: 'mobile-vue' })]
    })
  ]
});
  • 页面使用示例
<template>
  <view>
    <van-button type="primary">Vant 按钮</van-button>
    <t-button theme="primary">TDesign 按钮</t-button>
  </view>
</template>

五、重启开发服务器

npm run dev:h5

六、完整登录页面

<template>
    <div class="login-container">
        <div class="login-header">
            <div class="login-text">登录</div>
            <div class="register-link">注册账号 <i class="arrow-right">›</i></div>
        </div>
        <div class="login-content">
            <h2 class="login-title">项目管理系统App</h2>
            
            <!-- 登录方式切换 -->
            <div class="login-tabs">
                <div class="tab active">账号密码登录</div>
                <div class="tab">验证码登录</div>
            </div>
            
            <form>
                <!-- 用户名输入框 -->
                <div class="form-item">
                    <div class="input-wrapper">
                        <i class="ri-user-line input-icon user-icon"></i>
                        <input v-model="formData.username" placeholder="请输入账号" maxlength="20" />
                    </div>
                </div>

                <!-- 密码输入框 -->
                <div class="form-item">
                    <div class="input-wrapper">
                        <i class="ri-lock-line input-icon lock-icon"></i>
                        <input v-model="formData.password" type="password" placeholder="请输入密码" maxlength="20" />
                    </div>
                </div>

               <!-- 组织选择 -->
               <div class="form-item">
                    <div class="input-wrapper" @click="showOrganizationOptions">
                        <i class="ri-apps-line input-icon org-icon"></i>
                        <div class="picker-text">{{ getOrgName(formData.organization) }}</div>
                        <i class="ri-arrow-down-s-line arrow-down"></i>
                    </div>
                </div>
                
                <!-- 使用uni-app原生picker -->
                <!-- <picker 
                    v-if="showPicker"
                    mode="selector" 
                    :range="organizations" 
                    range-key="label"
                    @change="onPickerChange"
                    @cancel="showPicker = false"
                >
                    <view class="picker-view">请选择组织</view>
                </picker> -->

                <!-- 登录按钮 -->
                <button class="login-button" :disabled="loading" type="button" @click="handleLogin">
                    {{ loading ? '登录中...' : '登录' }}
                </button>
            </form>
        </div>
        <div class="version-info">版本 V1.2</div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 表单数据
const formData = reactive({
  username: '',
  password: '',
  organization: ''
})

// 组织列表数据
const organizations = ref([
  { label: '总公司', value: 'HQ' },
  { label: '分公司A', value: 'BranchA' },
  { label: '分公司B', value: 'BranchB' },
  { label: '分公司c', value: 'BranchC' },
  { label: '分公司D', value: 'BranchD' },
  { label: '分公司E', value: 'BranchE' },
  { label: '分公司F', value: 'BranchF' },
  { label: '分公司1', value: 'Branch1' },
  { label: '分公司2', value: 'Branch2' },
  { label: '分公司3', value: 'Branch3' },
  { label: '分公司4', value: 'Branch4' },
  { label: '分公司5', value: 'Branch5' },

])

// Picker显示控制
const showPicker = ref(false)

// 获取组织名称
const getOrgName = (value) => {
  if (!value) return '请选择组织'
  const org = organizations.value.find(item => item.value === value)
  return org ? org.label : '请选择组织'
}

// 处理Picker选择
const onPickerChange = (e) => {
  const index = e.detail.value
  formData.organization = organizations.value[index].value
  showPicker.value = false
}

// 显示组织选项
const showOrganizationOptions = () => {
  // 准备选项数组
  const itemList = organizations.value.map(org => org.label)
  
  // 显示操作菜单
  uni.showActionSheet({
    itemList,
    success: (res) => {
      // 用户选择了某个选项
      const index = res.tapIndex
      formData.organization = organizations.value[index].value
    },
    fail: () => {
      // 用户取消了选择
      console.log('用户取消选择组织')
    }
  })
}


// 加载状态
const loading = ref(false)

// 处理登录
const handleLogin = async () => {
  // 表单验证
  if (!formData.username) {
    uni.showToast({ title: '请输入账号', icon: 'none' })
    return
  }
  
  if (!formData.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' })
    return
  }
  
  if (!formData.organization) {
    uni.showToast({ title: '请选择组织', icon: 'none' })
    return
  }
  
  try {
    loading.value = true
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 存储用户信息
    uni.setStorageSync('userInfo', {
      username: formData.username,
      organization: formData.organization
    })
    
    // 添加调试信息
    console.log('登录成功，准备跳转到首页')
    
    // 登录成功后跳转到首页 - 确保路径格式正确
    uni.switchTab({
      url: '/pages/index/index',
      success: function() {
        console.log('跳转成功')
      },
      fail: function(err) {
        console.error('跳转失败:', err)
        // 尝试使用navigateTo作为备选方案
        uni.navigateTo({
          url: '/pages/index/index',
          fail: function(err2) {
            console.error('navigateTo也失败了:', err2)
            // 最后尝试redirectTo
            uni.redirectTo({
              url: '/pages/index/index'
            })
          }
        })
      }
    })
  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({ title: '登录失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  /* height: 100vh; */
  background: #ffffff;
  padding: 20px;
  overflow: hidden;
}

.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.login-text {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

.register-link {
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.arrow-right {
  margin-left: 4px;
  font-size: 16px;
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

form {
  width: 100%;
}
.login-title {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
}

.login-tabs {
  display: flex;
  /* border-bottom: 1px solid #e0e0e0; */
  margin-bottom: 30px;
  width: 100%;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  color: #999;
  position: relative;
  transition: all 0.3s;
}

.tab.active {
  color: #0052d9;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 25%;
  width: 50%;
  height: 3px;
  background-color: #0052d9;
  border-radius: 3px;
}

.form-item {
  margin-bottom: 24px;
  width: 100%;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 14px 20px;
  transition: all 0.3s;
  border: none;
  /* width: 100%; */
  box-sizing: border-box;
  margin: 0 20px 0 20px;
}

.input-wrapper:focus-within {
  background-color: #eef2ff;
  box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.2);
}

.input-icon {
  margin-right: 12px;
  font-size: 18px;
  color: #666;
}

.picker-text {
  flex: 1;
  color: #333;
}

.arrow-down {
  font-size: 12px;
  color: #999;
}

input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #333;
  padding: 0;
  height: 24px;
  line-height: 24px;
}

input::placeholder {
  color: #999;
}

.login-button {
  width: calc(100% - 40px);
  height: 50px;
  border: none;
  border-radius: 12px;
  background: #0052d9;
  color: white;
  font-size: 18px;
  font-weight: 500;
  margin: 30px 20px 0 20px;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.2);
}

.login-button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 82, 217, 0.3);
  background: #0047c0;
}

.login-button:disabled {
  background: #cccccc;
  box-shadow: none;
  color: #ffffff;
}

.version-info {
  text-align: center;
  color: #999;
  font-size: 14px;
  margin-top: auto;
  padding: 20px 0;
}
</style>

   Trae AI 自动实现App登录效果图

登录效果图

总结

可能有时候AI修改的不太符合，比如在添加暗黑模式这一节，它成功添加了暗黑模式，并且可切换，但它修改了不相关的代码，导致布局错误。在这种情况下，我们可以选择拒绝本次修改，接着优化提示词，为AI提供更精确的需求，或者进行手动修改

使用 Trae 可以实现相较于以往更为显著的效率提升，它提供了：

        Builder模式：在这个模式下它可以帮你编写项目、创建或删除文件、生成并运行终端命令、提取报错自动修复等
        Chat模式：在这个模式下它可以回答你的bug问题、讲解代码仓库、生成代码片段等
代码自动补全：根据你的代码，提供智能的补全建议、根据代码注释补全等。


多模态：可以将你的报错代码或UI截屏发送给AI，提供相应的建议
上下文：你可以在文件中选中代码片段或在终端中选中报错日志以及使用#选择文件或目录，指定AI的上下文以提供更符合正确的回答。


这几个功能大大提高我们的开发效率

相较于 Cursor 昂贵的费用，Trae 是一个不错的选择，目前限时免费，并且由国人团队开发，全面支持中文环境，总的来说 Trae 给我的体验还是挺不错的呢

# uni-app # tdesign
Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

cover

飞桨框架3.0解锁DeepSeek部署全流程极简体验

avatar DeepSeek技术社区
cover

DeepSeek观察：全球避险情绪升温与金价突破$3165现象研究

avatar DeepSeek技术社区
cover

大模型Agent入门：从概念到实践，探索智能体的未来

avatar DeepSeek技术社区