{"id":14973672,"url":"https://github.com/simonzhangiter/vuedemo_sell_eleme","last_synced_at":"2025-04-08T12:08:56.304Z","repository":{"id":45746727,"uuid":"76451994","full_name":"SimonZhangITer/VueDemo_Sell_Eleme","owner":"SimonZhangITer","description":":bowtie: ele by vue2.x :penguin:","archived":false,"fork":false,"pushed_at":"2021-06-06T13:15:44.000Z","size":1382,"stargazers_count":1381,"open_issues_count":0,"forks_count":542,"subscribers_count":86,"default_branch":"master","last_synced_at":"2025-04-08T12:08:37.644Z","etag":null,"topics":["axios","eslint","vue","vue-router","vue2","vuex","webpack"],"latest_commit_sha":null,"homepage":"https://simonzhangiter.github.io/VueDemo_Sell_Eleme","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimonZhangITer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-14T11:04:39.000Z","updated_at":"2025-01-04T15:08:05.000Z","dependencies_parsed_at":"2022-08-24T01:20:43.343Z","dependency_job_id":null,"html_url":"https://github.com/SimonZhangITer/VueDemo_Sell_Eleme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonZhangITer%2FVueDemo_Sell_Eleme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonZhangITer%2FVueDemo_Sell_Eleme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonZhangITer%2FVueDemo_Sell_Eleme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonZhangITer%2FVueDemo_Sell_Eleme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimonZhangITer","download_url":"https://codeload.github.com/SimonZhangITer/VueDemo_Sell_Eleme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247838444,"owners_count":21004580,"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","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","eslint","vue","vue-router","vue2","vuex","webpack"],"created_at":"2024-09-24T13:49:12.453Z","updated_at":"2025-04-08T12:08:56.283Z","avatar_url":"https://github.com/SimonZhangITer.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e 一直对vue很感兴趣，最近使用vue2.0开发了高仿饿了么点餐系统来练练手，不得不说vue真是一个很不错的框架，但是也遇到过一些坑，在这里和大家分享一下\n\n# 饿了么点餐系统\n\n\u003e vue2.0、vuex、vue-router、axios、webpack、eslint、better-scroll\n\n\n## 演示 \n\n\u003ca href=\"https://simonzhangiter.github.io/VueDemo_Sell_Eleme\" target=_blank\u003e在线演示戳我\u003c/a\u003e（请使用chrome开发者手机演示模式预览）\n\n### 移动端演示\n扫二维码在手机上查看效果更好\n\n\u003cimg src=\"https://static.oschina.net/uploads/space/2017/0207/180535_4FSI_2493500.png\" width=\"25%\"\u003e\n\n\n## 组件\n\n- [x] 购物车\n- [x] 购买物品小球飞入动画\n- [x] 评价star组件\n- [x] 商品添加、删除组件\n- [x] 优惠图标组件\n- [x] 目录、列表联动滚动\n- [x] 画廊\n- [x] 评论的是否满意和内容筛选\n- [x] 商品列表页面\n- [x] 店铺评价页面\n- [x] 商家介绍页面\n- [x] 优惠活动页面\n- [x] 商品详情页面\n\n## 构建\n\nvue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpack来集成各种开发便捷工具，比如：\n\n- 代码热更新，修改代码之后网页无刷新改变，对前端开发来说非常的方便\n- PostCss，再也不用去管兼容性的问题了，只针对chrome写css代码，会自动编译生成支持多款浏览器的css代码\n- Eslint，统一代码风格，规避低级错误，对于有代码洁癖的人来说是绝对的好东西，不过有些地方的代码校验有时候也挺麻烦的-.-\n- bable，ES2015出来已经有一段时间了，但是不少浏览器还没有兼容ES6.有了bable，放心使用ES6语法，它会自动转义成ES5语法。\n- Stylus，类似于SASS/SCSS，但是可以不写{}和“：”，使用起来还是很方便的\n- ...\n\n除此之外，vue-cli已经使用node配置了一套本地服务器和安装命令等，本地运行和打包只需要一个命令就可以搞定，非常的方便\n\n## 开发\n\nvue非常好的融合了react的组件化思想和angular的指令思想。\n一个vue的组件将HTML、CSS、JS代码写在一个文件里面，这样既方便编写，也方便管理和修改\n\n### Axios\n\n在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。\n\n使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里：\n\n```javascript\naxios.get(url).then((res)=\u003e{\n  this.data = res.data\n})\n```\n\n### Vuex\n\nvue提供了一个数据管理工具vuex，有点类似于angular中factory和service，可以进行数据上的通信。\n比如存储一些公共变量或者是不同组件间的数据处理等。\n\n这个有一些高级用法在这里不细说，想要了解的可以去官方文档看，有中文版本。\n\n```javascript\nconst store = new Vuex.Store({\n  state: {\n    count: 0\n  },\n  mutations: {\n    increment(state) {\n      state.count++\n    }\n  }\n})\n```\n\n### Vue-Router\n\nvue-router是vue的路由系统，可以用来创建单页应用。基本思想是在主页面中引入\u003crouter-view\u003e标签，然后定义路由，把router挂在到app上，然后把各个子页面渲染到view里面。使用起来还是很方便的，\n跳转页面只需要\n\n```javascript\nrouter.push('test')\n```\n\n### 获取元素节点\n\nvue2.0废除了v-el指令，所有的节点指令修改为ref，然后通过ref来获取元素节点，如\n\n```html\n\u003cdiv ref=\"testHook\"\u003etest\u003c/div\u003e\n...js code\nthis.$ref.testHook\n```\n\n### 组件间的通信\n\n一。如果是和子组件通信，则使用ref就可以实现，如：\n\n```html\n\u003ctest ref=\"testHook\"\u003e\u003c/test\u003e\n...js code\nthis.$ref.testHook.add() //调用test子组件的add方法\n```\n\n二。使用emit来发送广播\n\nvue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。使用方法如下：\n\n比如想要给test组件发送一个“相加”广播:\n\n```javascript\nexport default {\n  method:{\n  \tclick(){\n  \t  Vue.$emit('add',{}) //第二个参数可作为传递数据传送到监听端口，不需要则传空对象\n  \t}\n  }\n}\n```\n\n那么test组件中就需要监听，在created方法里写\n\n```javascript\nexport default {\n  created(){\n   Vue.$on('add',this.add)\n  },\n  method:{\n  \tadd(){\n  \t  this.count++\n  \t}\n  }\n}\n```\n\n\n除了以上总结的这点小的知识点以外，还有很多vue的知识想要和大家分享，以后会陆续写出来，大家感兴趣的也可以来我的GitHub一起来写这个项目（觉得不错的给个star Hah）\n\n## 安装步骤\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n## 项目截图\n\n\u003cimg src=\"https://static.oschina.net/uploads/space/2017/0207/110250_3uWi_2493500.jpeg\" width=\"40%\"/\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cimg src=\"https://cloud.githubusercontent.com/assets/20501873/24188896/ff2c5910-0f1d-11e7-80c0-bc28fd84fe80.png\" width=\"40%\"/\u003e\n\n## 交流\n\n欢迎热爱学习、忠于分享的胖友一起来交流\n\n- QQ：745913574\n\n- QQ群：149683643\n\n- WeChat\n\n\u003cimg src=\"https://p0.meituan.net/dpgroup/749d8a79cd0a9bbc4e25b2f474a398d91256770.png?\" width=\"25%\"\u003e\n\n## 声明\n\n本项目的设计资源来自\u003ca href=\"https://coding.imooc.com/class/74.html\" target=_blank\u003e慕课网\u003c/a\u003e，但慕课网采用的是vue1.0开发，本项目采用vue2.0重构，并且引入vuex、vue-router等插件，是我个人的练手项目，如有冒犯，还请海涵。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonzhangiter%2Fvuedemo_sell_eleme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonzhangiter%2Fvuedemo_sell_eleme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonzhangiter%2Fvuedemo_sell_eleme/lists"}