{"id":19301611,"url":"https://github.com/yangzai316/xiaomi_market","last_synced_at":"2025-07-25T04:13:17.640Z","repository":{"id":113433047,"uuid":"153596982","full_name":"yangzai316/xiaomi_market","owner":"yangzai316","description":"Make a mobile's project of vueJs for xiaomi market","archived":false,"fork":false,"pushed_at":"2018-11-27T09:42:40.000Z","size":12648,"stargazers_count":23,"open_issues_count":1,"forks_count":9,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-03T11:37:13.178Z","etag":null,"topics":["axios","flexible","vue-cli3","vue-router","vuejs2","vuex","xiaomi"],"latest_commit_sha":null,"homepage":"https://github.com/yangzaiwangzi/xiaomi_market.git","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yangzai316.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-10-18T09:18:19.000Z","updated_at":"2025-05-06T01:57:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"b868010c-dcf9-4084-b875-889e79c7cf35","html_url":"https://github.com/yangzai316/xiaomi_market","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yangzai316/xiaomi_market","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangzai316%2Fxiaomi_market","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangzai316%2Fxiaomi_market/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangzai316%2Fxiaomi_market/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangzai316%2Fxiaomi_market/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yangzai316","download_url":"https://codeload.github.com/yangzai316/xiaomi_market/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangzai316%2Fxiaomi_market/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266952904,"owners_count":24011513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","flexible","vue-cli3","vue-router","vuejs2","vuex","xiaomi"],"created_at":"2024-11-09T23:18:31.967Z","updated_at":"2025-07-25T04:13:17.632Z","avatar_url":"https://github.com/yangzai316.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 小米商城 移动端 仿版 test1\n## 声明\n本项目纯属本人闲时开发，页面参考小米商场官网（[移动版](https://m.mi.com/)）页面，项目中所涉及到的接口均为假数据，为实现页面数据交互效果（假数据小米商城官网）；\u003cbr\u003e\n其中开发均为本人一人参与，如有侵权，联系删除（@小米商场）；\u003cbr\u003e\n发现问题可Issues本人，会做相应修改，但具体功能截至，不做后续迭代；\u003cbr\u003e\n如有借鉴或转发,请表明本文出处即可，否，必追究。\u003cbr\u003e\n## 项目简介\n#### 项目生产环境效果预览\n线上服务是本人买的廉价的，会导致接口数据返回很缓慢...(本地跑的很快，我也很无奈...);\u003cbr\u003e\n效果预览图片处理软件生成的图片把背景色处理的很奇怪，原本就是普通的白色，大家凑合看...\n##### 整体\n![整体](https://github.com/yangzaiwangzi/xiaomi_market/blob/master/imgs/all.gif)\n##### 首页\n![首页](https://github.com/yangzaiwangzi/xiaomi_market/blob/master/imgs/index.gif)\n##### 商品详情\n![商品详情](https://github.com/yangzaiwangzi/xiaomi_market/blob/master/imgs/detail.gif)\n##### 分类\n![分类](https://github.com/yangzaiwangzi/xiaomi_market/blob/master/imgs/fenlei.gif)\n##### 购物车\n![购物车](https://github.com/yangzaiwangzi/xiaomi_market/blob/master/imgs/car.gif)\n##### 登陆+个人中心\n![登陆+个人中心](https://github.com/yangzaiwangzi/xiaomi_market/blob/master/imgs/login.gif)\n\n#### 项目启动\n本项目启动，需要后端接口的支持（即上面提到的假数据），所以需要启动两个项目：\n- 后端接口项目：\n克隆或下载后端接口项目，启动该项目，此处不过多介绍，请移驾[后端接口](https://github.com/yangzaiwangzi/xiaomi_market_api)，会有相关说明；\n- 前端项目（本仓库的项目）\n```\ngit clone https://github.com/yangzaiwangzi/xiaomi_market.git\n//开发环境\nnpm install\nnpm run serve\n\n//测试环境\nnpm run test\n//打包上传之后，注意服务端代理的配置\n\n//生产环境\nnpm run production\n//打包上传之后，注意服务端代理的配置\n\n```\n#### 技术栈+框架\n- vue 2.0\n- vue-cli 3.0\n- vuex\n- vue-router\n- vue-cookies\n- axios\n- mint-ui\n- rem(flexible.js实现页面自适应)\n- less\n#### 路由\n- 首页\n  - 商品详情\n    - 规格选择\n    - 评论列表\n    - 评论详情\n    - 参数详情\n    - 猜你喜欢\n- 分类\n- 购物车\n- 我的\n- 登陆\n\n## 开发过程\n#### 1、基于vue-cli@3，搭建项目骨架\n（1）搭建骨架，可参考[官网](https://cli.vuejs.org/zh/)\n```javascript\nnpm install -g @vue/cli\nvue create xiaomi_market //可自定义配置自己的框架需求 xiaomi_market为本项目的项目名\n```\n（2）开启项目\n```javascript\ncd xiaomi_market\nnpm i\nnpm run serve //开启本地项目\n```\n#### 2、引入rem布局的必要文件\n（1）增加flexible.js于/public/js/位置下，/public/index.html中引入该文件；\u003cbr\u003e\n（2）配置编译器的自动转换功能，（VScode可使用cssrem插件）;\u003cbr\u003e\n（3）添加代码，控制自适应的返回在320px--540px之间。\n```javascript\nif (width / dpr \u003e 540) {\n    width = 540 * dpr;\n}\nif (width / dpr \u003c 320) {\n    width = 320 * dpr;\n}\n```\n#### 3、引入reset.css、字体图标库\n（1）在App.vue 加入reset.css文件内容；\u003cbr\u003e\n（2）/public/index.html中引入字体图标库，可使用[iconfont阿里巴巴](http://www.iconfont.cn/)。\n#### 4、配置代理处理跨域\n（1）在根目录增加文件：vue.config.js\u003cbr\u003e\n（2）添加相应代码，可参考[官方文档](https://cli.vuejs.org/zh/config/#devserver)\n#### 5、封装接口请求函数\n（1）添加axios依赖；\u003cbr\u003e\n（2）在根目录添加文件夹server/；\u003cbr\u003e\n（3）在server/文件内添加api.js、index.js；\u003cbr\u003e\n（4）api.js依赖axios封装请求和相应的拦截器，并对GET、POST请求进行进一步封装返回promise；\u003cbr\u003e\n（5）index.js就对应的接口进行统一管理，主要引入api.js的方法，返回结果，需要引入的接口做相应的引入，即可。\n#### 6、配置环境变量\n（1）根目录新增文件 .env.test、.env.production，为打包目标做服务；\u003cbr\u003e\n（2）修改package.json中scripts如下（可自行定义）：\n```javascript\n{\n    \"serve\": \"vue-cli-service serve\",//运行本地环境，无需打包\n    \"test\": \"vue-cli-service build --mode test\",//打包测试环境代码\n    \"production\": \"vue-cli-service build --mode production\"//打包生产环境代码\n}\n```\n（3）根目录新增文件夹config，并在config/新增文件：dev.js、test.js、production.js，在其中配置相应的环境变量和值；\u003cbr\u003e\n（4）增加vue.config.js文件的内容如下：\n```javascript\nconst dev_config = require('./config/dev.js');\nconst test_config = require('./config/test.js');\nconst prodctioin_config = require('./config/production.js');\n\nconst env = process.env.NODE_ENV;//当前的环境\nlet config = null;\nif(env=='production'){\n    config = prodctioin_config;\n}else if(env=='test'){\n    config = test_config;\n}else{\n    config = dev_config;\n};\n```\n根据不同的环境，引入对应的config配置值。\n#### 7、添加插件miut-ui(UI框架)\n安装和调用 Vue CLI 插件,可使用vue add xxxx;\u003cbr\u003e\n其他框架依旧使用npm install xxx;\u003cbr\u003e\n这里可以参考[mint-ui官网](https://mint-ui.github.io/#!/zh-cn)\n在main.js文件添加如下代码：\n```javascript\nimport Mint from 'mint-ui';\nimport 'mint-ui/lib/style.css';\nVue.use(Mint);\n```\n#### 8、使用状态管理模式，vuex\n（1）根目录新增文件夹stote/（本次将vuex模块化，实际不需如此复杂，这里为了应用一下）；\u003cbr\u003e\n（2）store/中新增index.js（store的中心文件，暴露store给mian.js引用）、新增modules/（存放各个模块）；\u003cbr\u003e\n（3）modules/中新增indexItem.js(indexItem这个模块的中心文件)、新增indexItem/（存放该模块的actions、getters、mutations内容）；\u003cbr\u003e\n（4）indexItem.js添加如下代码：\n```javascript\n// indexItem\nimport actions from './indexItem/actions';\nimport getters from './indexItem/getters';\nimport mutations from './indexItem/mutations';\n\nconst state = {\n    activeIndex:1\n};\n\n\nexport default {\n    namespaced:true,\n    state,\n    actions,\n    getters,\n    mutations\n}\n```\n（5）store/index.js添加如下代码：\n```javascript\nimport Vue from 'vue'\nimport Vuex from 'vuex'\nimport indexItem from './modules/indexItem'\n\nVue.use(Vuex)\n\n\nexport default new Vuex.Store({\n  modules: {\n    indexItem\n  }\n})\n```\n（6）根目录main.js做vuex全局挂载（修改文件引用即可），至此vuex即可全局使用，可参考[vuex官方实例](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart)；\u003cbr\u003e\n（7）使用vuex,使用方法有很多，可参考[官方文档](https://vuex.vuejs.org/zh/guide/state.html)，我们这里使用对象展开运算符的方法:\n```javascript\nimport { mapState } from 'vuex';\n\n\n...\n  computed: {\n    ...mapState('indexItem',[\n      'activeIndex'\n    ])\n  },\n...\n...\n    console.log(this.activeIndex); //即可使用\n...\n...\n  methods:{\n    ...mapActions('indexItem',[\n      'changeIndexItem',\n      'setSwipeName'\n    ]),\n    changeItem(index){ \n      this.changeIndexItem(index);//即可使用\n    }\n  },\n...\n```\n#### 9、开始项目代码\n不过多介绍项目的代码进行的细节,会抽取部分简介：\n- 引入‘lodash.debounce’进行防抖操作；\n- 引入‘vue-cookies’进行cookie操作；\n#### 10、项目结束\n至此，项目基本结束，有问题可以在上面的Issues我，会做相应的修改；\u003cbr\u003e\n觉得还行，给个STAR鼓励一下，谢谢...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyangzai316%2Fxiaomi_market","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyangzai316%2Fxiaomi_market","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyangzai316%2Fxiaomi_market/lists"}