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

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

项目简介

这是一个使用vue3 + vite + ts开发的练习项目，包括商城前台和后台管理系统，技术栈包括：vue、vite、typescript、less、vue-router、pinia、axios、element-plus、echarts、mockjs。

效果展示

商城前台

商城首页：

商品详情页：

订单页： 

后台管理系统 

概览页：

商品列表：

订单列表：

项目结构

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

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

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

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

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

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

项目依赖

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

结语

这只是一个练手学习项目，很多页面都没补全，细节也有待完善，暂时发表一篇博客记录一下吧。