从零搭建可复用商城商品分类功能：新手零门槛一步步落地

前期准备

环境初始化命令

如果你还没有现有项目，直接复制以下命令依次执行，一键生成基础可运行项目：

``` 创建Vue3基础项目 npm create vite@latest mall-category-demo -- --template vue 进入项目目录 cd mall-category-demo 安装基础依赖 npm install 安装UI依赖（如果已有项目可跳过） npm install element-plus @element-plus/icons-vue ```

如果你已经有现有项目，直接跳过这一步，在项目src目录下新建MallCategory.vue组件即可继续操作。

第一步：定义分类标准数据结构

通用商城分类采用「一级分类+二级分类」的树状结构，对接后端时只需要遵循同结构即可，这里给出可直接复用的模拟数据：

``` // 可直接替换为后端接口返回的同格式数据 const categoryList = ref([ { id: 1, name: "数码家电", children: [ { id: 101, name: "手机", parentId: 1 }, { id: 102, name: "笔记本电脑", parentId: 1 }, { id: 103, name: "智能手表", parentId: 1 }, { id: 104, name: "降噪耳机", parentId: 1 } ] }, { id: 2, name: "服饰鞋包", children: [ { id: 201, name: "男装", parentId: 2 }, { id: 202, name: "女装", parentId: 2 }, { id: 203, name: "男鞋", parentId: 2 }, { id: 204, name: "女包", parentId: 2 } ] }, { id: 3, name: "生鲜食品", children: [ { id: 301, name: "新鲜水果", parentId: 3 }, { id: 302, name: "肉禽蛋类", parentId: 3 }, { id: 303, name: "饮料酒水", parentId: 3 } ] }, { id: 4, name: "家居家装", children: [ { id: 401, name: "家具", parentId: 4 }, { id: 402, name: "家纺", parentId: 4 }, { id: 403, name: "厨具", parentId: 4 } ] } ]) ```

注意：对接后端时，只需要要求后端返回每个一级分类下挂载children二级数组即可，不需要修改组件原有逻辑。

第二步：编写分类组件完整可复用代码

下面给出完整的组件代码，样式、交互都已经配置完成，直接复制到你的MallCategory.vue文件即可：

``` ```

第三步：运行测试与对接后端

本地运行测试步骤

• 把上文的模拟分类数据完整复制到组件的script部分，替换掉注释内容
• 打开项目根目录的src/App.vue，替换为以下内容：

``` ```

执行启动命令：

``` npm run dev ```

打开终端输出的本地地址，即可看到正常运行的商城分类：鼠标hover切换一级分类，右侧显示对应二级分类，点击分类触发回调，所有交互样式全部可用。

对接后端接口修改方法

只需要修改组件script部分的获取数据逻辑，替换后的完整代码逻辑如下：

``` import { ref, computed, onMounted } from 'vue' const categoryList = ref([]) const activeFirstId = ref(null) // 获取后端分类数据 const getCategoryList = async () => { // 替换为你的后端分类接口地址 const res = await fetch('/api/mall/category/list') categoryList.value = await res.json() // 默认激活第一个分类 if (categoryList.value.length > 0) { activeFirstId.value = categoryList.value[0].id } } // 组件挂载自动拉取数据 onMounted(() => { getCategoryList() }) ```

注意：只需要添加onMounted导入，其他原有逻辑不需要修改，直接保留即可。

绑定路由跳转

如果使用Vue Router，只需要在script开头添加路由导入：import { useRouter } from 'vue-router'，然后添加const router = useRouter()，再修改onCategoryClick方法的跳转逻辑即可，点击分类后会自动跳转到对应分类的商品列表页。

本组件支持无限二级分类扩展，可直接通过修改样式中的颜色、宽度、间距适配不同商城的设计需求，不需要改动核心逻辑。