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

风同九万里

已于 2024-09-12 13:57:56 修改

阅读量2.2k

点赞数 12

文章标签： vue.js vue typescript 前端 elementui

于 2023-10-03 22:34:09 首次发布

本文链接：https://blog.csdn.net/lxy_jrx/article/details/133530579

版权

项目简介

这是一套使用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. 商品上传

项目依赖

{
  "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"
  }
}