SaaS后台管理样式

推荐每个vue文件最外面的div盒子使用独立名称，style样式使用独立名称作为最外层；
webpack打包的时候会将样式打包在一起，如不使用独立名称，可能会引起样式冲突

shop.vue

<template>
    <div class="shop">
        <h1>标题</h1>
        <p>内容</p>
    </div>
</template>
<script></script>
<style lang="scss" scoped>
    .shop{
        background: red;
        h1{
            color: #fff;
            font-size: 16px;
        }
        p{
            color: #fff;
            font-size: 12px;
        }
    }
<style>

crm.vue

<template>
    <div class="crm">
        <h1>标题</h1>
        <p>内容</p>
    </div>
</template>
<script></script>
<style lang="scss" scoped>
    .crm{
        background: red;
        h1{
            color: #fff;
            font-size: 16px;
        }
        p{
            color: #fff;
            font-size: 12px;
        }
    }
<style>

element 组件的样式如需改动，请添加class名改动，不要使用element的命名改动样式（可能会引起样式冲突）；

<template>
    <div class="shop">
        <el-button class="edit">编辑</el-button>
    </div>
</template>
<script></script>
<style lang="scss" scoped>
    .shop{
        .edit{
            border-radius: 0;
            background: #38f;
            color: #fff;
        }
    }
<style>

class命名规范 全部用半角小写英文方式命名，多个单词使用 ‘ - ’ 连接；

<template>
    <div class="shop-edit">
        <el-button class="edit">编辑</el-button>
    </div>
</template>

style标签 有scoped属性 scoped属性会给css添加唯一标志
但是添加scoped 属性的css样式权重低于公共样式 可能会出现修改样式失败（权重太低被覆盖）

<style lang="scss" scoped>
    .shop{
        .edit{
            border-radius: 0;
            background: #38f;
            color: #fff;
        }
    }
<style>

公共样式：.red .green .org（#f60） .gray（#999） .both（清除浮动） .a-bth( a连接=>白色按钮) .add-btn(a连接=>蓝色按钮)

style使用SASS语法 参考中文文档