vue项目引入scss、elementui使用全局scss修改主题色，vue的路由引入；less的使用

布满荆棘的人生 2022-01-22 05:49 1455阅读 0赞

一、vue项目引入scss

[https://blog.csdn.net/Ag\_wenbi/article/details/87799557][https_blog.csdn.net_Ag_wenbi_article_details_87799557]

二、elementui使用全局scss修改主题色

1、在项目下新建color.css，内容位置如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

内容：

$--color-primary: #EE1D23;
    $--font-path: '~element-ui/lib/theme-chalk/fonts';
    @import "~element-ui/packages/theme-chalk/src/index";
    @font-face {font-family:gljIcon;src:url(~@/assets/fonts/iconfont.woff) format("woff"),url(~@/assets/fonts/iconfont.ttf) format("truetype");}
    .gljIcon{font-family: "gljIcon" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
    .tree-cust:before {content: "\e618";}
    .icon-group:before {content: "\e61a";}
    .icon-meter:before {content: "\e61b";}
    .icon-sum:before {content: "\e61c";}
    .icon-meterVirtual:before {content: "\e61d";}
    .icon-gaojing:before {content: "\e61e";}
    .icon-quanping:before {content: "\e621";}
    //修改菜单样式
    .el-submenu__title:hover{background-color:#EE1D23 !important;color:#fff !important;}
    .el-menu--horizontal > .el-submenu.is-active .el-submenu__title{border-color: #EE1D23 !important;background: #EE1D23 !important;}
    .el-menu.el-menu--horizontal{border: none;}
    .el-menu--horizontal > .el-menu-item.is-active{border-color: #EE1D23 !important;background: #EE1D23 !important;}
    .bgColor:hover{background: #EE1D23 !important;color: #fff !important;}
    .el-menu--horizontal .el-menu .el-menu-item.is-active{color: #fff !important;background: #EE1D23 !important;}
    .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{color: #fff !important;background: #EE1D23 !important;}
    //修改表格样式
    .cell .el-button--text{color:#0099ff;}
    .menu_  .el-dialog__body{padding-top: 10px;}
    //弹窗样式
    .el-dialog__header{border-bottom:1px solid #ccc;box-sizing: border-box;}
    .el-dialog__headerbtn .el-dialog__close{color: #EE1D23;font-weight: bold;}
    //时间框样式
    .el-time-spinner .el-time-spinner__wrapper.el-scrollbar:nth-child(2){display: none !important;}
    //滚动条的宽度
    ::-webkit-scrollbar {width: 10px;height: 10px;}
    //滚动条的滑块
    ::-webkit-scrollbar-thumb {background-color: #EE1D23;border-radius: 10px;}
    //滚动条框大小
    .el-table__fixed-right-patch{width:15px !important;}

引入使用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1][]

二、创建路由

固定创建：在src下创建→router→index.js

index.js内容

import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/pages/login/login'
    import Main from '@/pages/main/main'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {path: '/',name: 'Login',component: Login},
        {path: '/Main',name: 'Main',component: Main}
      ]
    })

动态创建：main.js下

import Router from 'vue-router'
    Vue.use(Router)
    
    function findNav_(navArr,nav){
      for(let i=0;i<navArr.length;i++){
        if(navArr[i].children.length != 0){//存在子菜单
          if(navArr[i].url != "一级菜单"){
            nav.push({
              path:navArr[i].path,
              name:navArr[i].name,
              component:resolve=>require(["@/pages/"+navArr[i].url],resolve),
              children:[]
            })
          }
          findNav_(navArr[i].children,nav);
        }else{//不存在子菜单
          nav.push({
            path:navArr[i].path,
            name:navArr[i].name,
            component:resolve=>require(["@/pages/"+navArr[i].url],resolve),
          });
        }
      }
    }
    
    axios.post("menu/getAllMenu")
    .then(result=>{//向后台请求菜单
      const routers = new Router({//通过这种形式导入路由
        routes: (()=>{
          let navArr=result.data;
          let nav = [];
          findNav_(navArr,nav);//递归
          return nav
        })()
      })
      new Vue({
        el: '#app',
        router:routers,
        store,
        components: { App },
        template: '<App/>'
      });
    }).catch(err=>{
      console.log(err);
    })

less的使用

//定义变量
    @color：#fff
    .myclass{
        background:@color;
    }
    
    //定义共用代码段
    .gy{
        display:flex
    }
    .myclass{
        .gy;
        align-items:center;
    }
    
    //定义传参,不传参有默认参数
    .gycc(@bgcolor:#000){
        background:@bgcolor
    }
    
    .myclass{
        .gycc(red)
    }

scss（sass的新版本）

//定义变量
    $color = "#fff"
    .class{
        background:$color
    }
    //定义共用片段
    @mixin gy{
        display:flex;
    }
    .myclass{
        @include gy
    }
    //定义共用片段,带默认参数
    @mixin gy($align:center,$justify:center){
        display:flex;
        align-items:$align;
        justify-content:$justify;
    }
    .myclass{
        @include gy(center.center)
    }
    //同层级
    div li{
        &:hover{}
    }
    
    //继承
    .cl{
        color:#fff;
    }
    .myclass{
        @extend .cl;
    }

[https_blog.csdn.net_Ag_wenbi_article_details_87799557]: https://blog.csdn.net/Ag_wenbi/article/details/87799557
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20220122/a714d8ff350348ff9b2208a7122cb61c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1]: /images/20220122/f67099a072f64a9f9b54a07f047460d3.png