Vue：将以往的JQ页面，重构成Vue组件页面的大致思路梳理(组件化编码大致流程)

一、实现静态组件

组件要按照功能点拆分，命名不要与HTML元素冲突。

• 1、根据UI提供的原型图，进行结构拆分，拆分的粒度以是否方便给组件起名字为依据。并梳理好对应组件的层级依赖关系。
• 2、拆分好结构后，开始对应的写组件，并根据梳理好的层级关系，对应引入组件。
• 3、根据UI提供的静态HTML、CSS代码，进行组件标签的替换。并同时调试效果。
  3.1)、把HTML中的body里面的div内容，直接全部拷贝到App.vue组件中。
  3.2)、把CSS中的样式代码，全部拷贝到App.vue组件中。
  3.3)、利用浏览器F12查看相应结构对应的div，然后，将该div剪切到对应的组件template区域。并将App.vue中对应的div替换成vue组件标签。其他结构以此类推。直到所有结构拆分完毕。
  3.4)、将对应CSS代码，剪切到对应组件的style区域。

二、实现动态组件

• 1、数据的类型和名称怎么定义？
  这个最好和DB表结构设计的字段保持一致，会省去很多麻烦事。
  原则：一堆数据用数组存，每条数据用对象存。
  例如：
  
• 2、数据与组件的对应关系，即该块数据应该展示在哪个组件里？
  1)、一个组件使用：放在组件自身即可。
  2)、多个组件共同使用：放在他们共同的父组件上（状态提升）。

三、实现交互（待补充）

从绑定事件开始。
。。。