{"action":"created","issue":{"url":"https://api.github.com/repos/SimonZhangITer/MyBlog/issues/2","repository_url":"https://api.github.com/repos/SimonZhangITer/MyBlog","labels_url":"https://api.github.com/repos/SimonZhangITer/MyBlog/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/SimonZhangITer/MyBlog/issues/2/comments","events_url":"https://api.github.com/repos/SimonZhangITer/MyBlog/issues/2/events","html_url":"https://github.com/SimonZhangITer/MyBlog/issues/2","id":208882862,"number":2,"title":"使用vue2+Vuex+Router写的Demo以及遇到的一些坑和使用建议","user":{"login":"SimonZhangITer","id":20501873,"avatar_url":"https://avatars1.githubusercontent.com/u/20501873?v=3","gravatar_id":"","url":"https://api.github.com/users/SimonZhangITer","html_url":"https://github.com/SimonZhangITer","followers_url":"https://api.github.com/users/SimonZhangITer/followers","following_url":"https://api.github.com/users/SimonZhangITer/following{/other_user}","gists_url":"https://api.github.com/users/SimonZhangITer/gists{/gist_id}","starred_url":"https://api.github.com/users/SimonZhangITer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SimonZhangITer/subscriptions","organizations_url":"https://api.github.com/users/SimonZhangITer/orgs","repos_url":"https://api.github.com/users/SimonZhangITer/repos","events_url":"https://api.github.com/users/SimonZhangITer/events{/privacy}","received_events_url":"https://api.github.com/users/SimonZhangITer/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":31,"created_at":"2017-02-20T13:41:12Z","updated_at":"2017-03-14T03:31:46Z","closed_at":null,"body":"> 一直对vue很感兴趣，最近使用vue2.0开发了高仿饿了么点餐系统来练练手，不得不说vue真是一个很不错的框架，但是也遇到过一些坑，在这里和大家分享一下\r\n\r\n# 饿了么点餐系统\r\n\r\n> vue2.0、vuex、vue-router、axios、webpack、eslint、better-scroll\r\n\r\n部分细节还在开发中，感兴趣的可以加入进来，觉得不错的给个star\r\n\r\nGitHub地址：[https://github.com/SimonZhangITer/VueDemo_Sell_Eleme](https://github.com/SimonZhangITer/VueDemo_Sell_Eleme)\r\n\r\n## 演示\r\n\r\n<div align=center><a href=\"http://vuejssellapp.t.imooc.io/\" target=_blank>在线演示戳我</a></div>\r\n\r\n<div align=center>\r\n<img src=\"https://static.oschina.net/uploads/space/2017/0207/180535_4FSI_2493500.png\" width=\"20%\">\r\n<div>扫二维码在手机上查看效果更好</div>\r\n</div>\r\n\r\n## 项目截图\r\n\r\n<div align=center><img src=\"https://static.oschina.net/uploads/space/2017/0207/110250_3uWi_2493500.jpeg\" width=\"40%\"></div>\r\n\r\n<div align=center><img src=\"https://static.oschina.net/uploads/space/2017/0207/110759_xva1_2493500.jpeg\" width=\"40%\"></div>\r\n\r\n## 构建\r\n\r\nvue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpack来集成各种开发便捷工具，比如：\r\n\r\n- 代码热更新，修改代码之后网页无刷新改变，对前端开发来说非常的方便\r\n- PostCss，再也不用去管兼容性的问题了，只针对chrome写css代码，会自动编译生成支持多款浏览器的css代码\r\n- Eslint，统一代码风格，规避低级错误，对于有代码洁癖的人来说是绝对的好东西，不过有些地方的代码校验有时候也挺麻烦的-.-\r\n- bable，ES2015出来已经有一段时间了，但是不少浏览器还没有兼容ES6.有了bable，放心使用ES6语法，它会自动转义成ES5语法。\r\n- Stylus，类似于SASS/SCSS，但是可以不写{}和“：”，使用起来还是很方便的\r\n- ...\r\n\r\n除此之外，vue-cli已经使用node配置了一套本地服务器和安装命令等，本地运行和打包只需要一个命令就可以搞定，非常的方便\r\n\r\n## 开发\r\n\r\nvue非常好的融合了react的组件化思想和angular的指令思想。\r\n一个vue的组件将HTML、CSS、JS代码写在一个文件里面，这样既方便编写，也方便管理和修改\r\n\r\n### Axios\r\n\r\n在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。\r\n\r\n使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里：\r\n\r\n```javascript\r\naxios.get(url).then((res)=>{\r\n  this.data = res.data\r\n})\r\n```\r\n\r\n### Vuex\r\n\r\nvue提供了一个数据管理工具vuex，有点类似于angular中factory和service，可以进行数据上的通信。\r\n比如存储一些公共变量或者是不同组件间的数据处理等。\r\n\r\n这个有一些高级用法在这里不细说，想要了解的可以去官方文档看，有中文版本。\r\n\r\n```javascript\r\nconst store = new Vuex.Store({\r\n  state: {\r\n    count: 0\r\n  },\r\n  mutations: {\r\n    increment(state) {\r\n      state.count++\r\n    }\r\n  }\r\n})\r\n```\r\n\r\n### Vue-Router\r\n\r\nvue-router是vue的路由系统，可以用来创建单页应用。基本思想是在主页面中引入<router-view>标签，然后定义路由，把router挂在到app上，然后把各个子页面渲染到view里面。使用起来还是很方便的，\r\n跳转页面只需要\r\n\r\n```javascript\r\nrouter.push('test')\r\n```\r\n\r\n### 获取元素节点\r\n\r\nvue2.0废除了v-el指令，所有的节点指令修改为ref，然后通过ref来获取元素节点，如\r\n\r\n```html\r\n<div ref=\"testHook\">test</div>\r\n...js code\r\nthis.$ref.testHook\r\n```\r\n\r\n### 组件间的通信\r\n\r\n一。如果是和子组件通信，则使用ref就可以实现，如：\r\n\r\n```html\r\n<test ref=\"testHook\"></test>\r\n...js code\r\nthis.$ref.testHook.add() //调用test子组件的add方法\r\n```\r\n\r\n二。使用emit来发送广播\r\n\r\nvue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。使用方法如下：\r\n\r\n比如想要给test组件发送一个“相加”广播:\r\n\r\n```javascript\r\nexport default {\r\n  method:{\r\n  \tclick(){\r\n  \t  Vue.$emit('add',{}) //第二个参数可作为传递数据传送到监听端口，不需要则传空对象\r\n  \t}\r\n  }\r\n}\r\n```\r\n\r\n那么test组件中就需要监听，在created方法里写\r\n\r\n```javascript\r\nexport default {\r\n  created(){\r\n   Vue.$on('add',this.add)\r\n  },\r\n  method:{\r\n  \tadd(){\r\n  \t  this.count++\r\n  \t}\r\n  }\r\n}\r\n```\r\n\r\n\r\n除了以上总结的这点小的知识点以外，还有很多vue的知识想要和大家分享，以后会陆续写出来，大家感兴趣的也可以来我的GitHub一起来写这个项目（觉得不错的给个star Hah）\r\n\r\nGitHub地址：[https://github.com/SimonZhangITer/VueDemo_Sell_Eleme](https://github.com/SimonZhangITer/VueDemo_Sell_Eleme)"},"comment":{"url":"https://api.github.com/repos/SimonZhangITer/MyBlog/issues/comments/286312096","html_url":"https://github.com/SimonZhangITer/MyBlog/issues/2#issuecomment-286312096","issue_url":"https://api.github.com/repos/SimonZhangITer/MyBlog/issues/2","id":286312096,"user":{"login":"songyule","id":23656890,"avatar_url":"https://avatars1.githubusercontent.com/u/23656890?v=3","gravatar_id":"","url":"https://api.github.com/users/songyule","html_url":"https://github.com/songyule","followers_url":"https://api.github.com/users/songyule/followers","following_url":"https://api.github.com/users/songyule/following{/other_user}","gists_url":"https://api.github.com/users/songyule/gists{/gist_id}","starred_url":"https://api.github.com/users/songyule/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/songyule/subscriptions","organizations_url":"https://api.github.com/users/songyule/orgs","repos_url":"https://api.github.com/users/songyule/repos","events_url":"https://api.github.com/users/songyule/events{/privacy}","received_events_url":"https://api.github.com/users/songyule/received_events","type":"User","site_admin":false},"created_at":"2017-03-14T03:31:46Z","updated_at":"2017-03-14T03:31:46Z","body":"能否稍微详细讲解一下，加入购物车的哪个动画效果。谢谢了。"}}
{"actor":{"display_login":"songyule"}}