本文共 816 字，大约阅读时间需要 2 分钟。

项目前言

本项目采用前后端分离架构，前端基于Vue框架搭建，参考小米商城实现，但与小米官方商城无关。如需购买小米产品，请访问小米官方网站。

项目架构

• 开发环境：使用@vue/cli 4.5.9版本脚手架搭建项目，支持node-sass 4.12.0和sass-loader 8.0.2，提供CSS预处理功能。
• 框架版本：
  • Vue: "^2.6.11"
  • Vue Router: "^3.2.0"
  • Vuex: "^3.0.0"
  • Element UI: "^2.15.1"
  • Axios: "^0.21.1"

技术栈概述

本项目主要采用以下技术：

• Vue全家包（Vue、Vue Router、Vuex）
• Element UI组件库
• Axios用于前端后端通信
• Node Sass加速CSS处理
• Vue CLI作为项目管理工具

项目功能模块

本项目涵盖以下功能模块：

• 首页：包含商品展示、分类筛选、关键词搜索等功能
• 登录注册：支持用户名字母开头、长度5-16且允许字母数字下划线的验证
• 商品详情页：展示商品详细信息及购物车功能
• 购物车与订单结算：支持商品数量调整与订单信息提交
• 用户中心：显示收藏列表、订单历史及个人信息
• 错误处理页：提供友好提示及返回主页功能

模块技术点

跨域处理

• 使用vue.config.js配置，通过devServer.proxy实现跨域
  -代理路径/api指向目标URL，支持跨域请求

登录功能

• Dialog对话框控制显示与隐藏
• 用户名和密码均需正则验证
• 密码规则：字母开头，长度6-18，允许字母数字下划线
• 登录状态管理通过Vuex实现

首页优化

• 组件化设计：拆分为头部、底部及商品区域
• 商品列表通过公共组件MyList实现，支持传递商品数据及操作
• 全局组件注册方式：Vue.component在main.js中挂载

总结

本项目采用标准化技术架构，涵盖全渠道用户体验，通过模块化设计和组件化开发确保系统灵活高效。