- 对于需求的分析
- 分析页面的组成对页面进行整体的布局（一般可分为头，肚，尾（上下））。
- 查看系统内是否有相似的页面的进行参考。（尽量参考已有页面进行开发（代码复用实现快速开发））。
2. 开始开发操作
1. 看页面的哪些模块是否需要多次复用，如果需要进行组件的封装。
2. 可以使用一些封装好了的组件包实现快速的开发。
3. 对于css样式的设计
1. 这个是可以参考其他模块的颜色 ，距离.
2. css层叠样式表
1.内联.内嵌.外部样式文件（内联>内嵌>外部样式文件）
3. css选择器
1.元素选择器，类选择器，id选择器。设置全局的样式（body{…..}）
4. cssPosition（定位与布局）
Position的五个属性：
Static：元素的默认值，没有定位，遵循正常的文档流对象，静态定位的元素不会受到top，bottom，left，right影响。
Fixed定位：元素的位置相对于浏览器窗口固定位置，即使窗口是滚动的它也不会移动。
Relative定位：相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块。
Absolute：绝对定位元素相对于最近的已定位元素。
Sticky定位：粘性定位。
z-index：重叠元素。
5. css边框
1.border-style：none（无框） dotted（点线边框）solid（实线） dashed（虚线） 2.边框宽度：border-width
3.边框颜色：border-color
6. css背景
背景颜色：background-color
背景图片：background-image
背景图像-定位：background-position
7. 字体，文本属性
颜色：color
文本对其方式：text-align
文本修饰：text-decoration
文本转换：text-transform
文本缩进：text-index
文本行高：line-height
文本间距：word-spacing（单词间距）
字体设置：font-family
字体样式：font-style
8. css表格
表格边框：border
表格宽度：table{width：100%}
高度：th，td{height：50px}
表格文字对齐：text-align：文本对齐
Vertical-align：垂直对齐
4. 总结
我个人觉得Vue最核心的设计理念，就是把一个看起来很完整的页面，分散到了每一个组件，这个组件可能大到一个页面，Hello.vue，也可能小到一个按钮，最终我们看到的页面，是这一群组件的堆砌的结果，这样做的一大好处就是，每一个组件都可以单独进行与数据库和用户的交互，开发更为清晰