基于 Vue 3 + vuex+vue-router 开发的前端商城（开源免费）

#体验链接：
http://47.109.42.57/#/

#说明：

这是一套基于 Vue 3 + vuex+vue-router + Pinia 开发的高品质电商前端模板， 还原网易严选核心设计风格 （其实是模仿）—— 简约高级的视觉体系、清晰的层级布局、流畅的交互体验，同时兼顾实用性与扩展性，源码开源，可以来我的博客免费自提 blog.csdn.net/2501_936250…

#环境： node，express，npm，vue，less，vuex，vue-router #运行教程： 解压后把项目主文件夹名改成shangcheng cd到 server文件夹下运行指令：

nodemon

以启动后端请求服务 然后再到主目录运行

npm install
npm run serve

#适用人群：

前端开发者（Vue 技术栈）：快速搭建电商项目原型、毕业设计、商业项目二次开发； 后端开发者：需要配套高质量前端界面，无需投入大量时间开发前端，直接对接接口即可实现完整商城功能； 创业团队 / 个体商户：低成本快速搭建自有品牌电商网站，减少开发周期； 学生 / 编程学习者：学习 Vue 3 实战开发、电商业务逻辑设计、响应式布局与交互优化； 设计师转前端：参考成熟电商 UI 实现，快速落地视觉方案。

#使用场景：

搭建垂直品类电商平台（如家居、美妆、数码、生鲜等，支持品类灵活扩展）； 企业官网附属商城模块、品牌自营电商网站开发； 毕业设计 / 课程设计（电商方向）、技术面试项目展示；

#核心目标：

降低电商前端开发门槛：提供 “拿来即用” 的完整解决方案，减少重复开发工作，缩短项目上线周期； 保证体验与颜值双在线：还原网易严选级别的视觉质感和交互流畅度，提升用户留存率；

#另外： 作为新人，首次发布开源免费

##架构设计和实现 使用vue/cli构建，css预设为less,用哈希模式，要vuex,不要eslint,

一、项目整体架构概述

本项目基于 Vue 生态+Node.js 实现仿网易严选核心功能，采用前后端分离架构：前端通过 Vue 全家桶（Vue 3+Vue Router+Vuex）构建用户界面与状态管理，后端通过 Node.js+Express 模拟接口数据，同时支持拉取网易严选公开 API 补充真实数据，整体架构清晰、模块解耦，便于扩展与维护。

核心技术栈

• 前端：Vue 3、Vue Router 4、Vuex 4、Less、Axios
• 后端模拟：Node.js、Express、Nodemon
• 工具：npm、VS Code（或其他编辑器）

二、目录结构详解

 NEW_ONE/
├── .git/                  # Git版本管理（默认隐藏）
├── node_modules/          # 项目依赖包
├── public/                # 静态资源（如index.html）
├── server/                # 后端模拟服务
│   └── data/              # 模拟数据文件
│       ├── banner.json    # 轮播图模拟数据
│       ├── hot.json       # 人气产品模拟数据
│       └── product.json   # 商品模拟数据
├── src/                   # 前端核心代码
│   ├── api/               # 接口请求封装
│   │   ├── base.js        # 基础请求配置（如Axios拦截器）
│   │   ├── index.js       # API请求入口
│   │   └── req.js         # 请求函数封装
│   ├── assets/            # 静态资源
│   │   ├── images/        # 图片资源
│   │   │   └── logo.png   # 项目Logo
│   │   └── styles/        # 样式资源（全局/通用）
│   ├── components/        # 通用复用组件
│   │   ├── library/       # 全局通用组件
│   │   │   ├── AppMore.vue       # 更多相关组件
│   │   │   ├── AppSkeleton.vue   # 全局骨架屏组件
│   │   │   ├── HomeBanner.vue    # 轮播图组件
│   │   │   └── index.js          # 组件注册入口
│   │   ├── skeleton/      # 页面专属骨架屏
│   │   │   └── HomeVueSkeleton.vue  # 主页骨架屏
│   │   ├── AppHeaderNav.vue      # 主页导航栏组件
│   │   ├── AppTopNav.vue         # 顶部通栏组件
│   │   ├── MainHomeBanner.vue    # 主页轮播图组件
│   │   ├── MyGoodsitem.vue       # 商品卡片组件
│   │   ├── MyHeader.vue          # 分类选择栏组件
│   │   └── MyPanel.vue           # 产品栏目头组件（含插槽）
│   ├── router/            # 路由配置
│   │   ├── router.js      # 路由拆分配置
│   │   └── index.js       # 路由入口（创建/导出路由实例）
│   ├── store/             # Vuex状态管理
│   │   ├── index.js       # 仓库入口（整合modules）
│   │   └── modules/       # 模块拆分（按功能）
│   │       └── index.js   # modules整合入口
│   ├── utils/             # 工具类
│   │   └── constants.js   # 常量定义（如接口地址、枚举值）
│   ├── views/             # 页面视图组件
│   │   ├── Category/      # 分类页面
│   │   │   └── MainCategory.vue  # 分类主视图
│   │   ├── Home/          # 主页相关视图
│   │   │   ├── MainHome.vue   # 主页主视图
│   │   │   ├── HomeHot.vue    # 人气产品视图
│   │   │   ├── HomeNew.vue    # 新品视图
│   │   │   └── HomeProduct.vue # 商品详情视图
│   │   ├── MainLayout.vue     # 主布局组件（一级路由）
│   │   └── MainLogin.vue      # 登录界面（待开发）
│   ├── App.vue            # 根组件
│   └── main.js            # 项目入口文件（创建Vue实例）
├── .babel.config.js       # Babel配置
├── .gitignore             # Git忽略文件配置
├── jsconfig.json          # JS项目配置（路径别名等）
├── package-lock.json      # 依赖版本锁定文件
├── package.json           # 项目配置（依赖、脚本等）
├── README.md              # 项目说明文档
└── vue.config.js          # Vue项目配置（如代理、资源路径）

三、核心模块实现细节

1. 状态管理（Vuex）实现

• 采用模块化拆分： store/modules/ 目录按功能拆分模块（如 user.js 专门管理用户数据），避免单一仓库过于臃肿。
• 数据来源： user.js 暂存自定义用户数据，后续可扩展对接登录接口；商品数据通过网易严选 API 拉取后存入对应模块（可新增 goods.js 模块管理）。
• 整合导出： store/index.js 中导入所有 modules，通过 createStore 整合后导出，全局挂载供组件使用。

2. 路由配置（Vue Router）实现

• 路由层级：分为一级路由（MainLayout 主布局、MainLogin 登录页）和二级路由（MainHome 主页），通过 children 配置实现嵌套渲染。
• 动态路由：为商品详情页绑定动态路由（如 /product/:id ），接收商品 ID，实现精准跳转。
• 路由出口：MainLayout 组件中通过 router-view渲染二级路由，根组件中通过 router-view 渲染一级路由，结构清晰。

3. 组件设计与复用

• 全局组件： components/library/ 下的轮播图、骨架屏等组件设计为全局注册（若环境注册失败，可临时改用局部注册），提升复用效率。
• 业务组件：按功能拆分商品卡片、导航栏等业务组件，通过 props 传递数据、插槽（如 MyPanel 的 2 个插槽）实现灵活扩展。
• 样式复用：通过 Less 变量（variables.less）统一颜色规范，样式混合（mixins.less）封装通用效果（如悬浮阴影），保证样式一致性。

4. 接口请求与数据模拟

• 真实数据： api/index.js 封装 Axios 请求函数，拉取网易严选公开 API 数据，存入 Vuex 仓库供组件渲染。
• 模拟后台： server/ 目录通过 Express 搭建本地服务，模拟后端接口返回数据；运行前需启动服务（nodemon 监听文件变化），避免依赖真实接口限制。

5. 静态资源与工具类

• 资源管理： assets/ 目录统一管理图标、全局样式，base.css 初始化浏览器样式，避免兼容问题。
• 工具辅助： utils/ 目录存放导航栏默认数据，解决异步请求未返回时的页面渲染空白问题，提升用户体验。

四、项目运行步骤

1. 环境准备

确保本地已安装：Node.js、npm、nodemon

2. 启动流程

3. 克隆/下载项目到本地，进入项目根目录；

主文件夹名改成shangcheng 2. 启动后端模拟服务：

cd server  # 进入模拟服务目录
nodemon    # 启动服务（默认监听3000端口）

3. 启动前端项目（新终端窗口）：

cd ..      # 返回项目根目录
npm install  # 安装依赖（首次运行需执行）
npm run serve  # 启动前端服务（默认监听8080端口）

4. 浏览器访问 http://localhost:8080 ，即可查看项目效果。

五、关键注意事项

1. 全局组件注册失败时，可在使用组件的页面通过 import 局部注册，不影响功能使用；
2. 网易严选 API 若存在跨域问题，可在 Express 服务中配置 CORS 跨域支持（ npm install cors 后引入使用）；
3. 骨架屏组件可继续完善，覆盖更多异步加载场景（如商品列表、分类数据），提升加载体验；
4. 登录页面待开发，后续可扩展 Vuex 用户状态同步、token 存储等功能。

通过以上架构设计，项目实现了模块解耦、复用性强、易扩展的特点，适合作为 Vue 全栈电商项目的入门实践，也可在此基础上扩展购物车、订单、支付等核心功能。

—————— 另外，本文为作者原创内容，首次发布于csdn，现同步至稀土掘金

原文链接：blog.csdn.net/2501_936250…