部分最基本的功能
点餐菜单部分最基本的功能
项目是由vue-cli生成的vue+webpack模板基础上构建的：
|
|
目前整个页面分成了8个组件： 
八个组件是分层次的：组件分层嵌套。层次的确定有的是根据功能区分，有的是根据渲染的位置和层次。根组件下只包含四个子组件：
menu-header：头部结构，包含店铺信息，搜索模块等；menu-item：v-for渲染的list，用于显示菜品；menu-cart：用于显示当前点菜的数量和价格；pic-card：卡片式大图查看组件，在点击菜品缩略图时弹出；这里组件的划分也不是最合理的，我感觉在功能划分上做的还不够好。
既然是一个点菜的页面，那么菜品信息必然是主要的部分：
|
|
在实际中页面渲染可以在客户端或者服务端，在客户端可以通过网络请求获取JSON格式的数据，或者从本地存储（localStorage）中读取，服务端渲染则是计算出可用的HTML和相应的CSS，JS直接返回给客户端。
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以
is特性扩展。
|
|
注意：Vue构造器的多数选项也可以用在 Vue.extend() 中，不过有两个特例：data 和 el。如果只是将数据直接放入创建函数中，则所有组件实例都会共享同样的数据，有时候这并不是我们希望的（实际上Vue在注册组件时直接给data对象会抛出一个警告，最终会拒绝执行data解析工作），所以可以传入一个函数作为data选项——函数返回一个真正的数据对象。
|
|
tag 表示自定义的组件名，建议使用 小写，用短杠分隔 的规则。component 是创建的组件。注册之后就可以在其它模板中使用此组件。
局部注册的目的在于:让组件只能用在其它组件内，而不是全局都可以使用。，在实例选项 components 中注册：123456789var Child = Vue.extend({ /* ... */ });var Parent = Vue.extend({ template: '...', components: { // <my-component> 只能用在父组件模板内 'my-component': Child }});
Vue.component() 注册函数的第二个选项可以直接传入选项对象，Vue会自动调用 Vue.extend() 函数创建组件，使用方式可简化为：12345678910111213// 在一个步骤中扩展与注册Vue.component('my-component', { template: '<div>A custom component!</div>'})// 局部注册也可以这么做var Parent = Vue.extend({ components: { 'my-component': { template: '<div>A custom component!</div>' } }})
Flex是Flexible Box的缩写，意思为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。123.box{ display: flex;}
行内元素也可以使用Flex布局。123.box{ display : inline-flex;}
Webkit内核的浏览器，必须加上-webkit前缀。1234.box{ display ：-webkit-flex; /*Safari*/ display : flex;}
注意，设为Flex布局以后，子元素的float、clear、和vertical-align属性将失效。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
VueJs：
数据驱动的组件，为现代化的 Web 界面而生
Vue的核心包括两部分：
Vue官网中专门有一篇文章讲Vue和其它框架的对比，个人觉得有点参考价值，从中可以窥见很多Vue重要的特性：
本文可以作为一个平时使用的css参考手册，文章来源于网上，具体见文章末尾。
|
|