20191008实习记录

如何在vue里面引入scss？

利用gulp打包工具

为所有自定义组件建立一个文件夹，把相关的scss写在里面，比如a.scss,b.scss，并且在同级目录下新增component.scss，引入a.scss,b.scss，在外部再写一个component.scss，把不同组件目录下的component.scss引入，再写一个main.scss，把最外部的component.scss引入。然后在gulp.js里面把main.scss打包成css，并且在main.js里引入这个css

 .tableContent{
            box-sizing: border-box;
            line-height: 28px;
            border: 1px solid #DCE1E7;
            border-top: none;
            .headerRow{
                box-sizing: border-box;
                line-height: 28px;
                >div{
                    box-sizing: border-box;
                    height: 28px;;
                    border-right: 1px solid #DCE1E7;
                }
                span{
                    margin-left: 2px;
                }
                .remark{
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
            &:nth-of-type(odd){
                background-color: #F3F3F3;
            }
        }

其中&表示大括号外部的元素，即li，>表示直接的子元素

&:nth-of-type(odd)是选择器，选择的是序号为偶数的&元素，即li。可以用来实现表格的斑马线。

 <li v-for="(item, index) in tableData" :key="index" class="tableContent">
          <h-row type="flex" class="headerRow" v-if="item.editState == 9">
            <h-col span="2">
            </h-row>
</li>