位置: IT常識 - 正文
推薦整理分享Vue項目如何配置、切換主題顏色(mixin + scss方式,簡單高效)(vue項目如何配置啟動的端口),希望有所幫助,僅作參考,歡迎閱讀內(nèi)容。
文章相關(guān)熱門搜索詞:vue怎么配置,vue項目如何配置nginx,vue項目搭建配置,vue項目如何配置nginx,vue項目如何配置polyfill,vue項目配置后端地址,vue項目如何配置nginx,vue項目如何配置主題色,內(nèi)容如對您有幫助,希望把文章鏈接給更多的朋友!
但圖多
基本樣式: 紅色主題:
藍色主題:
看到這里,是不是有人已經(jīng)開始安耐不住了?😏
Action一. 首先,引入scss依賴(node-sass, sass-loader)npm install node-sass sass-loader --save-dev二.項目樣式文件目錄介紹1.此處我將項目中的公共樣式文件放到了 src/style目錄下,其中 index.scss是以供全局使用的一些基本樣式,在main.js文件中引入即可全局使用(圖2)。 _theme.scss, _handle.scss兩個文件為我們稍后進行主題顏色配置的文件.
三.主題目錄scss文件配置
1.src/style目錄下的_themes.scss,里面可以配置不同的主題配色方案,這里我配置了三個主題顏色,分別為basic、red、blue。 _themes.scss文件內(nèi)容:
$themes: ( basic: ( basic_color: #3064E7,// 主題色 logo_color: #3064E7, // 主題色字體 title_color: #494D50, //新增、注冊、行業(yè)標頭字體顏色 foot_tolor: #5E6165, // 頁腳字體顏色 font_color1: #909399, font_color2: #909399, // 小logo圖片 logo_image: url('@/assets/image/logo.png'), // 大logo圖片 big_logo_image: url('@/assets/image/logo_big.png'), // banner圖片 banner_image: url('@/assets/image/basic_banner.png'), // 首頁搜索按鈕 search_btn: linear-gradient(187deg, #5E9DF5 0%, #3064E7 47%), // 注冊動態(tài)下邊框 border_bottom_1: 1px solid #3064E7, // 注冊動態(tài)邊框 card_border_1: 1px solid rgba(208,211,219,1), // 注冊動態(tài)卡片背景 zhuce_card: #fff, // 新聞標題聚焦顏色 font_hover: #3064E7, //背景 navbar_background: #fff, background_color2: #f0f2f5, // 新聞時事背景 // news_background: #fff, // 注冊動態(tài)背景 zhuce_background: #fff, // 行業(yè)資訊背景 hangye_background: #fff, background_color3: red, background_color4: #2674e7, //邊框 border_bottom: 5px solid #4554DE, ), red: ( basic_color: #D0021B, logo_color: #fff, title_color: #494D50, //新增、注冊、行業(yè)標頭字體顏色 foot_tolor: #5E6165, // 頁腳字體顏色 font_color1: #909399, font_color2: #fff, // 新聞標題聚焦顏色 font_hover: #D0021B, // 小logo圖片 logo_image: url('@/assets/image/logo_white.png'), // 大logo圖片 big_logo_image: url('@/assets/theme/redTheme/logo-b.png'), // banner圖片 banner_image: url('@/assets/theme/redTheme/banner-bg.png'), // 首頁搜索按鈕 search_btn: linear-gradient(187deg, #d20000 0%, #da0707de 47%), // 注冊動態(tài)下邊框 border_bottom_1: 2px solid #D0021B , // 注冊動態(tài)邊框 card_border_1: 1px solid rgba(208,211,219,1), // 注冊動態(tài)卡片背景 zhuce_card: #fff, //背景 navbar_background: url('@/assets/theme/basicTheme/top-bg.png'), background_color2: #283142, // 新聞時事背景 // news_background: #fff, // 注冊動態(tài)背景 zhuce_background: #fff, // 行業(yè)資訊背景 hangye_background: #fff, background_color3: #1e6ceb, background_color4: #323e4e, //邊框 border_bottom: 5px solid #fff, ), blue: ( basic_color: #0DECFF , logo_color: #fff, title_color: #fff, //新增、注冊、行業(yè)標頭字體顏色 foot_tolor: #B2D4F5 , // 頁腳字體顏色 font_color1: #909399, font_color2: #fff, // 新聞標題聚焦顏色 font_hover: #0E458C, // 小logo圖片 logo_image: url('@/assets/image/logo_white.png'), // 大logo圖片 big_logo_image: url('@/assets/theme/redTheme/logo-b.png'), // banner圖片 banner_image: url('@/assets/theme/blueTheme/y.png'), // 首頁搜索按鈕 search_btn: linear-gradient(187deg, #0076FF 0%, #0076FF 47%), // 注冊動態(tài)下邊框 border_bottom_1: 2px solid #0DECFF , // 注冊動態(tài)卡片背景 zhuce_card: #034488, // 注冊動態(tài)邊框 card_border_1: 2px solid rgba(8,93,185,1), //背景 navbar_background: #0E458C, foot_background: linear-gradient(131deg, #005FBC 0%, #08215F 100%), // 新聞時事背景 news_background: url('@/assets/theme/blueTheme/科技藍.png') no-repeat, // 注冊動態(tài)背景 zhuce_background: #033367, // 行業(yè)資訊背景 hangye_background: #033367, background_color2: #283142, background_color3: #1e6ceb, background_color4: #323e4e, //邊框 border_bottom: 5px solid #fff, ),);2.src/style/下的 _handle.scss來操作上述1中的$theme變量(當然兩個文件可以合并,分開寫是想把配置和操作解耦),上代碼: _handle.scss文件內(nèi)容:
@import "./_theme.scss";//遍歷主題map@mixin themeify { @each $theme-name, $theme-map in $themes { //!global 把局部變量強升為全局變量 $theme-map: $theme-map !global; //判斷html的data-theme的屬性值 #{}是sass的插值表達式 //& sass嵌套里的父容器標識 @content是混合器插槽,像vue的slot [data-theme="#{$theme-name}"] & { @content; } }}//上一篇:命令行 cnpm install 報錯: Install fail Error: Unsupported URL Type: npm:vue-loader@^15.9.7(命令行查看ip地址)
下一篇:Mac 更換.gradle文件目錄(修改gradle版本)
網(wǎng)站地圖: 企業(yè)信息 工商信息 財稅知識 網(wǎng)絡(luò)常識 編程技術(shù)
友情鏈接: 武漢網(wǎng)站建設(shè)