vue項目引入scss、elementui使用全局scss修改主題色，vue的路由引入

一、vue項目引入scss

https://blog.csdn.net/Ag_wenbi/article/details/87799557

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

1、在項目下新建color.css，內容位置如下

內容：

$--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;}

引入使用：

二、創建路由

固定創建：在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);
})