企业官网建设流程全解析

我身边好几个搞独立开发的朋友，都拿宠物寄养或者宠物社区这种项目来练手。移动端这套东西跟我们平时写惯的企业后台管理系统不太一样，中后台重点在于数据流转顺不顺、表格表单方不方便，但换到移动端（无论是做H5、小程序还是React Native），用户第一眼看的就是界面颜值，对交互的流畅度要求也很高。

很多人后端接口拿Gin或者Spring Boot搭得飞快，但一到写前端页面就卡住了，尤其是那种带点设计感的界面，更是头疼。所以今天干脆就以一个完整的宠物寄养APP为例，把最近折腾下来的一些前端选型思路和UI落地经验跟大家盘一盘。

一、前端架构怎么选？Vue 3 + Pinia 的移动端实践

对于这种轻量级的移动端应用，Vue 3搭配Vite现在算是比较舒服的选择。 Composition API这套写法，配合Vite的冷启动速度，开发时的体验比之前webpack那套顺滑不少，尤其是改了代码等热更新的时候，基本没等。

具体到这个宠物APP，状态管理这块是少不了的。举个例子，首页要展示当前宠物的体重和疫苗状态，“我的”页面也要看这些信息。如果全靠props一层层往子组件传，写着写着就能把自己绕晕。Vuex 那套写起来太啰嗦，直接就用Pinia 了。

你可以建一个 usePetStore 的仓库，把当前正在操作的宠物数据、用户的登录态、还有一些全局配置统一扔进去。配合 <script setup> 语法糖，实际页面里想用的时候，一行 import { usePetStore } from '../stores' 就搞定了，store里的数据本身就是响应式的，改了页面自动更新。这样做最大的好处是，页面组件里只剩下视图渲染和基本的点击事件处理，后面不管是加一个“在线预约”的弹窗，还是扩展宠物详情页，改动范围都控制得很小，不会出现改一个功能崩掉三个页面的情况。

二、移动端UI的痛点，以及日常AI工具的局限性

底层架构搭好后，真正费时间的体力活才开始——写样式。

移动端的UI规范看着简单，但细枝末节特别多。这个宠物APP里，底部导航栏要固定、首页卡片全是圆角、社区板块又涉及瀑布流布局。以前的标准流程就是对着UI稿量像素，手写flex布局，哪怕用了Tailwind CSS，一堆class类名敲下来也挺枯燥的。

现在大家多少都会用AI辅助编码，遇到算法逻辑或者报错排查，把问题贴给Claude或者直接在Cursor里用补全，确实很快能拿到可用的方案。还有一些像Pico这种偏网页生成的工具，做个简单的后台系统也还凑合。

但实际用下来，你想靠几句话的描述让Cursor凭空生出一个带着品牌主色调、图标间距精致、交互直觉也对的宠物APP界面，基本不现实。生出来的东西就是个骨架，内边距不对、字体大小层级混乱，最后你还是要自己动手一行行改样式，算下来并没有省太多时间，有时候反而更折腾。

三、实战演示：AI生成高保真界面与Vue代码

面对这种很看重视觉呈现的场景，我现在更倾向于走“生成UI + 导出代码”的工作流。

可以先看看下面这组宠物APP的界面图：

这套图包含了数据看板、预约表单、动态瀑布流和个人中心。没有走设计师出图、开发还原的传统流程，这次我用的是墨刀AI，确定好功能范围之后，直接描述大概的需求，它就自动生成了一套配色统一、带好了占位素材的界面。

对于开发者来说，设计稿再好看，落不到代码里，对我们开发来说也是白搭。

界面右边可以切换代码模式，看到当前页面对应的Vue 3代码。从上面这两张真实生成Vue代码的截图里，能看到几个在实际工程中比较实用的细节：

• 代码结构跟我们平时写的一致，<script setup lang="ts"> 里自动把 lucide-vue-next 图标库和需要用到的状态都引入好了；
• 数据和视图是分开的，首页的健康指标卡片、服务入口这些，都抽成了 healthItems 之类的数组变量，而不是在模板里写死一堆 div。后面对接真实接口，直接 v-for 循环就行，不用再回头改结构；
• 样式部分也直接生成了响应式的代码，卡片阴影、间距、弹性布局这些基础样式都带好了，不用自己一个个补。

把这些生成的 .vue 文件直接拖进之前搭好的Vue 3项目里，把 usePetStore 里的假数据换成真实接口数据，一个页面基本上就通了。

总结

“架构先搭好，界面直接出代码”的这套流程，对独立开发者来说，确实能把前端时间从按周算压缩到按天算。如果你也在计划搞个移动端项目练手，建议把主要精力放在业务逻辑和表结构设计上，UI部分交给合适的AI工具去生成，自己回来改改接口和交互细节就行了。