Vue商城实战项目，高仿京东，包含后台管理系统

目录

项目简介

效果展示

商城前台

后台管理系统 

项目结构

源码下载

项目简介

这是一套使用Vue3 + Vite + Typescript开发的商城学习项目，包括商城前台和后台管理系统，可以作为一个Vue学习项目使用。商城前台仅简单实现了首页、商品详情、购物车、订单中心4个页面，后台管理系统仅实现了概览页、商品列表、订单列表、商品添加4个页面。

用到的技术栈包括：Vue、Vite、Typescript、Less、Vue Router、Pinia、Axios、Element Plus、ECharts、Mockjs。

现代前端开发很少原生Javascript和CSS，因为使用它们确实比较麻烦，特别是CSS繁琐的样式写法，所以在此项目中选择了Typescript和Less。

Element Plus是当前市面上使用的最广泛Vue3 UI框架，是前端开发必备的技能之一，所以商城后台管理系统基于Element Plus开发，但是如果在实际生产项目中还是要慎重选择，市面上仍有很多优秀的UI框架可供选择，例如Naive UI、阿里的Ant Design Vue、字节Acro Design、腾讯TDesign、华为OpenTiny ，笔者最近就在项目中使用Naive UI和TDesign，工具无好坏，合适就是最好的。

ECharts是也是当前市面上使用最为广泛的图表组件，也是前端开发必备的技能之一，所以后台管理系统的图表使用ECharts开发。

Pina用于Vue组件之间的状态管理，相比与Vuex，它的使用更加简单，有逐步取代Vuex的趋势。

Vue Router用于路由管理，其实就是管理访问路径和Vue组件之间的映射关系。

Axios用于与后台系统交互，Mockjs用于模拟后台api接口。

效果展示

商城前台

1. 商城首页

2. 商品详情

3. 购物车

4. 订单中心

后台管理系统 

1. 概览页

2. 商品列表

3. 订单列表

4. 商品上传

项目结构

1. 基本结构

1. public目录：存放图片、图标等公共资源。

2. views目录：存放项目中的vue页面。

3. compoents目录：存放项目中的vue组件。

4. mock目录：存放mockjs文件，用于模拟后台api接口。

5. router目录：定义项目路由。

6. store目录：用于存放各组件的公用变量等。 

2. 项目依赖

{
  "name": "vue-mall-example",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@icon-park/vue-next": "^1.4.2",
    "axios": "^1.4.0",
    "echarts": "^5.4.3",
    "element-plus": "^2.3.9",
    "pinia": "^2.1.6",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "less": "^4.2.0",
    "less-loader": "^11.1.3",
    "mockjs": "^1.1.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-mock": "^2.9.8",
    "vue-tsc": "^1.8.5"
  }
}

源码下载

这只是一个练手学习项目，所以只写了部分页面，细节也有待完善，最近根据大家反馈，对源码进行了翻新整理，请下载源码后查阅release-notes.txt即可，具体修改内容如下：

源码下载地址：https://pan.baidu.com/s/1fCpOiqmJIrt0EhTtI2EKRg?pwd=6688，提取码6688。

下载之后，项目中有readme.txt，node版本号要对的上（v14.18.2），只需要npm install安装依赖成功之后，npm run dev就可运行项目，使用项目的前提是你必须具备一定的前端知识，如果需要安装node环境可参考博主另一篇文章：Nodejs安装及配置，包含Windows和Linux两种平台_nodejs安装及环境配置-CSDN博客。