[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8740":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":27,"discoverSource":28},8740,"xmall-front","Exrick\u002Fxmall-front","Exrick","基于Vue开发的XMall商城前台页面 PC端","http:\u002F\u002Fxmall.exrick.cn",null,"Vue",2878,970,89,7,0,2,58.16,false,"master",true,[23],"vue","2026-06-12 04:00:41","## XMall-Front\n### 基于Vue开发的XMall商城前台页面\n### [宣传视频](https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002Fav23121122\u002F)\n- 作者亲自制作 [点我观看](https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002Fav23121122\u002F)\n### 项目已部署，在线Demo\n- 前台商城：http:\u002F\u002Fxmall.exrick.cn\u002F\n- 后台管理系统：http:\u002F\u002Fxmadmin.exrick.cn\u002F\n### 感谢 [yucccc](https:\u002F\u002Fgithub.com\u002Fyucccc) 的开源 [vue-mall](https:\u002F\u002Fgithub.com\u002Fyucccc\u002Fvue-mall) 项目提供前端页面及框架支持\n### 后端全部重新开发接口，实现后台系统管理，后端接口项目请跳转至 [xmall](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxmall) 项目仓库查看\n### 新增与优化\n- [x] 优化页脚、增加商品搜索框组件\n- [x] 优化登录注册界面\n- [x] 新增搜索页面，实现高亮分页搜索\n- [x] 新增捐赠页面，捐赠列表显示\n- [x] 全部商品页面实现分页\n- [x] 优化订单详情，实现查看订单进度，可对订单进行处理\n- [x] 实现生成订单接口、优化地址管理编辑选择\n- [x] 实现查看个人订单分页\n- [x] 接入[XPay个人免签收款支付系统](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxpay)\n- [x] 首页升级！重构首页，后台可配置，包括3D轮播图\n- [x] 新增分类查看品牌周边等\n- [极验验证码移除文档](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxmall\u002Fwiki\u002F%E6%9E%81%E9%AA%8C%E7%A7%BB%E9%99%A4%E6%96%87%E6%A1%A3)\n    \n![](https:\u002F\u002Fi.loli.net\u002F2018\u002F07\u002F21\u002F5b52e192366a0.jpg \"首页\")\n\n![](https:\u002F\u002Fi.loli.net\u002F2018\u002F07\u002F22\u002F5b5447c0f2b69.jpg \"页脚\")\n\n![](https:\u002F\u002Fi.loli.net\u002F2018\u002F07\u002F22\u002F5b5447e84edd9.jpg \"搜索框组件\")\n\n![](https:\u002F\u002Fi.loli.net\u002F2018\u002F07\u002F22\u002F5b5448040ff95.jpg \"搜索结果\")\n\n![](https:\u002F\u002Fi.loli.net\u002F2018\u002F07\u002F22\u002F5b54489e41551.jpg \"分页\")\n\n![](https:\u002F\u002Fi.loli.net\u002F2018\u002F07\u002F22\u002F5b54482cca360.jpg \"订单详情\")\n\n![](https:\u002F\u002Fi.loli.net\u002F2018\u002F07\u002F22\u002F5b5448494d6b6.jpg \"订单进度\")\n\n![](https:\u002F\u002Fi.loli.net\u002F2018\u002F07\u002F22\u002F5b54486109ade.jpg \"登录界面\")\n    \n### 所用技术\n\n- Vue 2.x\n- Vuex\n- Vue Router\n- [Element UI](http:\u002F\u002Felement.eleme.io\u002F#\u002Fzh-CN)\n- ES6\n- webpack\n- axios\n- Node.js\n- 第三方SDK\n    - ~~[极验Test-button人机验证码](http:\u002F\u002Fwww.geetest.com\u002FTest-button.html)~~ 因其收费详见[极验验证码移除文档](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxmall\u002Fwiki\u002F%E6%9E%81%E9%AA%8C%E7%A7%BB%E9%99%A4%E6%96%87%E6%A1%A3)\n- 第三方插件\n    - [hotjar](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxmall\u002Fblob\u002Fmaster\u002Fstudy\u002Fhotjar.md)：一体化分析和反馈\n    - ~~[搜狐畅言评论插件](http:\u002F\u002Fchangyan.kuaizhan.com\u002F)~~ 垃圾广告评论插件 现已更换 [Gitment](https:\u002F\u002Fgithub.com\u002Fimsun\u002Fgitment)\n\n### 本地开发运行\n- 启动后端 [xmall](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxmall) 项目后，在 `config\u002Findex.js` 中修改你的后端接口地址配置\n- Gitment评论配置见 [Gitment](https:\u002F\u002Fgithub.com\u002Fimsun\u002Fgitment) 使用到的页面为 `thanks.vue`\n- `index.html` 中复制粘贴替换你的 [hotjar](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxmall\u002Fblob\u002Fmaster\u002Fstudy\u002Fhotjar.md) 代码\n- 在项目根文件夹下先后执行命令 `npm install` 、 `npm run dev`\n- 商城前台端口默认9999 http:\u002F\u002Flocalhost:9999\n## 部署\n- 先后执行命令 `npm install` 、 `npm run build` 将打包生成的 `dist` 静态文件放置服务器中，若使用Nginx等涉及跨域请配置路由代理\n### 技术疑问交流\n- QQ交流群 `475743731(付费)`，可获取各项目详细图文文档、疑问解答 [![](http:\u002F\u002Fpub.idqqimg.com\u002Fwpa\u002Fimages\u002Fgroup.png)](http:\u002F\u002Fshang.qq.com\u002Fwpa\u002Fqunwpa?idkey=7b60cec12ba93ebed7568b0a63f22e6e034c0d1df33125ac43ed753342ec6ce7)\n- 免费交流群 `562962309` [![](http:\u002F\u002Fpub.idqqimg.com\u002Fwpa\u002Fimages\u002Fgroup.png)](http:\u002F\u002Fshang.qq.com\u002Fwpa\u002Fqunwpa?idkey=52f6003e230b26addeed0ba6cf343fcf3ba5d97829d17f5b8fa5b151dba7e842)\n\n- 个人博客：[http:\u002F\u002Fblog.exrick.cn](http:\u002F\u002Fblog.exrick.cn)\n\n### 开源协议\n- 请遵循原作者MIT开源协议\n\n### 作者其他项目推荐\n- [XMall微信小程序APP前端 现已开源！](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxmall-weapp)\n    \n    [![WX20190924-234416@2x.png](https:\u002F\u002Fs2.ax1x.com\u002F2019\u002F10\u002F06\u002FucEsBD.md.png)](https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002Fav70226175)\n\n- [X-Boot前后端分离开发平台](https:\u002F\u002Fgithub.com\u002FExrick\u002Fx-boot)\n\n    ![](https:\u002F\u002Fi.loli.net\u002F2020\u002F03\u002F13\u002FrQGAWv1h8VMeIdi.png)\n\n- [XPay个人免签收款支付系统](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxpay) 无需挂机App 自动回调\n\n- 个人机器学习笔记\n    - [Machine-Learning](https:\u002F\u002Fgithub.com\u002FExrick\u002FMachine-Learning)\n\n### [捐赠](http:\u002F\u002Fxmall.exrick.cn)\n","Exrick\u002Fxmall-front 是一个基于 Vue 开发的 XMall 商城前台页面，适用于 PC 端。该项目集成了 Vue 2.x、Vuex、Vue Router 和 Element UI 等现代前端技术栈，提供了一个功能齐全且界面友好的在线商城解决方案。核心功能包括商品展示与搜索、用户登录注册、购物车管理、订单处理等，并支持分页和高亮搜索结果显示。此外，项目还实现了生成订单接口及优化地址管理等功能，并接入了 XPay 个人免签收款支付系统。适合需要快速搭建电商网站或学习 Vue 技术栈的实际应用场景。","2026-06-11 03:19:33","top_language"]