Vue.js-饿了么实战-新手向

前置要求

1、Vue基础知识 参考官网。~~~一直看到看不懂了就行，边做边学才重要~~~
2、vue-cli 会用命令行工具新建一个项目、运行一个项目
3、npm/cnpm 花个十分钟了解下

项目运行

新手向：
先安装：node、vue、vue-cli;
下载项目;
然后在(mac)terminal下：

//用cd指令进入项目文件夹，再输入：
npm run dev

项目预览

项目分析

组件化开发

简单的讲，诸如页面中的‘⊕’标签、购物车、食物详情弹出框等等都是组件。哪里要用到它们，就在哪里引入它们，就像搭积木一样。我们要做的就是写好一个个的组件，再把这些组件一一加载在页面上。

页面分析

整个demo分成5个部分：
1、页面header部分：

2、中间的container部分：

3、底下的shoppingCart部分：

4、弹出的bulletin部分：

5、商品的pop-up层：（这里和慕课网的教程不一样，我是直接照着官网上的效果写的）

项目构思

有多少个page?

这是个单页的demo

最主要的交互有哪些？

header --> bulletin （点击header中的某些元素弹出bulletin页面，下同）
container --> 商品、评价、商家
container --> pop-up商品详情层
shoppingCart --> 弹出框
+、- 标签 --> 购买、移除商品

需要用到的技能：

• 基础要求：js(es6) / css / html
  
• 增加效率的：
  css: less/sass/stylus
  js: jQuery
  
• Vue相关的：
  脚手架工具：vue-cli
  模板：webpack
  vue官方文档：基础部分、component（组件）、transition（组件切换动画）
  组件切换：vue-router
  组件之间通信：eventBus / vuex
  
• 额外的
  ajax：axios
  

了解了这些之后，就可以开始写项目了。在需要用到以上这些技能的时候，就勇敢的去把它点亮就好。

写大框框

个人习惯先把最主要的大框框写了，再往里面填细节。

写page

由于这个demo只有一个页面，所以在用vue-cli新建了一个webpack项目之后，直接用项目中默认的 app.vue 作为主页面就行。
ps：建议将src目录下除了app.vue和main.js之外的所有文件删除。然后在src下新建：component(组件)、route(路由)、stylus(公共样式；或者less/sass等，看用的什么就写什么)、common(公用资源)，一个简单的项目目录就搞定了

关于Vue全家桶的那些事

Vue全家桶包括Vue-router、Vuex、axios以及构架工具Vue-cli 首先我们得了解一些组件的知识，在翻阅了官方文档之后，相信大家都跃跃欲试。
那么问题来了，怎么样写一个组件出来呢？
相信你需要一个手把手教你怎么做的教程，好巧我这里写了一个:(害羞脸
点击：https://github.com/wengzs/theory_of_Vue/blob/master/Vue-component.md
接着我们再把官方的vue-router文档也看了一遍。当然问题又来了，怎么写个能用的路由出来呢？
点击：https://github.com/wengzs/theory_of_Vue/blob/master/Vue-router.md
不急，你一定会遇到非父子组件通信的问题，当然是继续看教程咯：
点击：

写组件

改BUG