vue+iview+less 實現換膚功能

Songlcy 發布于2019-08-02 11:17 / 1574人閱讀

摘要：項目搭建用的，框架選擇的首先安裝支持然后去文件夾下的文件中，添加對的支持準備工作做好了，開始換膚新建一個文件夾，在里面新建一個文件定義一個方法，寫上需要的顏色參數如圖文件夾下再新建一個存放各類主題的文件，里面根據自己需求定義各類主題

項目搭建用的vue—cli，css框架選擇的iview
1、首先安裝less支持

npm install --save-dev less-loader less

然后去build文件夾下的webpack.base.conf.js文件中，添加對.less的支持

2、準備工作做好了，開始換膚

2.1新建一個文件夾styles，在里面新建一個文件theme.less 
定義一個.theme()方法，寫上需要的顏色參數如圖：

2.2 styles文件夾下再新建一個存放各類主題的color.less文件，里面根據自己需求定義各類主題，記得把theme.less文件引入

    @import url("./theme.less");
    .theme1{
        .theme();//默認的樣式
    }
    .theme2{
        .theme(rgb(141, 139, 219),#fff,#eee,rgb(130, 126, 240));
    }
    .theme3{
        .theme(rgb(172, 214, 200),#615f5f,#fff,rgb(91, 139, 123));
    }

2.3 在main.js中引入color.less文件

     import "./styles/color.less"

2.4 在進行主題選擇的.vue文件中，進行如下操作

     
        
            下拉菜單
            
        
        
            搖滾主題
            新時代主題
            基礎主題
        
    
    
     //更換主題
      changeColor(num){
        //把className theme1，theme2，theme3掛載在app.vue的上
        document.getElementById("app").className ="theme"+num ;
        this.localStorageDate()
      },
     //存儲localStoarge，用于進入系統時，記住用戶上一次的選擇，自動加載用戶上一次選擇的主題主題，記得在mounted()里面調用
      localStorageDate(){
        localStorage.setItem("app",document.getElementById("app").className)
      }

GPU云服務器云服務器換膚功能 VUE實現webrtc Vue實現分頁 vue+webrtc實現實時視頻通話,語音通話

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52890.html

vue+iview+less 實現換膚功能

摘要：項目搭建用的，框架選擇的首先安裝支持然后去文件夾下的文件中，添加對的支持準備工作做好了，開始換膚新建一個文件夾，在里面新建一個文件定義一個方法，寫上需要的顏色參數如圖文件夾下再新建一個存放各類主題的文件，里面根據自己需求定義各類主題項目搭建用的vue—cli，css框架選擇的iview1、首先安裝less支持 npm install --save-dev less-loader le...

LancerComet 2019-08-29 16:26 評論0 收藏0
vue+iview+less 實現換膚功能

摘要：項目搭建用的，框架選擇的首先安裝支持然后去文件夾下的文件中，添加對的支持準備工作做好了，開始換膚新建一個文件夾，在里面新建一個文件定義一個方法，寫上需要的顏色參數如圖文件夾下再新建一個存放各類主題的文件，里面根據自己需求定義各類主題項目搭建用的vue—cli，css框架選擇的iview1、首先安裝less支持 npm install --save-dev less-loader le...

amuqiao 2019-08-26 12:14 評論0 收藏0
iView 發布后臺管理系統 iview-admin，沒錯，它就是你想要的

摘要：簡介是基于，搭配使用組件庫形成的一套后臺集成解決方案，由前端可視化團隊部分成員開發維護。遵守設計和開發約定，風格統一，設計考究，并且更多功能在不停開發中。 showImg(https://segmentfault.com/img/remote/1460000011603206); 簡介 iView Admin 是基于 Vue.js，搭配使用 iView UI 組件庫形成的一套后臺集成解...

HackerShell 2019-08-21 17:06 評論0 收藏0
vue開發項目完全指南

摘要：有兩種方法，一種是在開發環境中設置通過的，另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統一管理在項目開發過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統一管理接口。這篇文章總結了vue項目的所遇到的問題，包括跨域、用戶認證、接口統一管理、路由配置、兼容性處理，性能優化等內容。項目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 評論0 收藏0