开发前端项目的一点小心得

1. 对于需求的分析
2. 分析页面的组成对页面进行整体的布局（一般可分为头，肚，尾（上下））。
3. 查看系统内是否有相似的页面的进行参考。（尽量参考已有页面进行开发（代码复用实现快速开发））。

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，也可能小到一个按钮，最终我们看到的页面，是这一群组件的堆砌的结果，这样做的一大好处就是，每一个组件都可以单独进行与数据库和用户的交互，开发更为清晰