本來我以為主題配置應(yīng)該很簡單脆侮，按照vant官網(wǎng)上面的來不就完事了黎做。可是我自己試著做的時候并不是一番風(fēng)順的阳堕。過程可謂是曲折跋理。這篇文章是我成功之后總結(jié)出來的步驟。在這期間遇到的坑之后再記錄一次恬总。
一前普、先創(chuàng)建項(xiàng)目
在命令行輸入vue create vant-theme-test創(chuàng)建項(xiàng)目
一般來說，使用vant的項(xiàng)目越驻，css預(yù)處理器一般會選擇less，所以這次我們創(chuàng)建項(xiàng)目就使用less。
接下來缀旁，靜等一段時間安裝完畢依賴记劈。
等安裝完畢之后，執(zhí)行 npm i vant -S 安裝Vant并巍，然后按照官網(wǎng)的教程設(shè)置“按需引入組件”——按需引入組件
二目木、引入vant的某些組件
為了方便直觀，我們把App.vue文件清空懊渡，然后引入兩個組件刽射，Grid 宮格 和 Pagination 分頁。代碼如下
<template>
<div id="app">
<van-grid>
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
</van-grid>
<div style="height:20px;margin:20px;"></div>
<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
</div>
</template>
<script>
import Vue from 'vue';
import { Grid, GridItem, Pagination } from 'vant';
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Pagination);
export default {
name: "App-root",
data() {
return {
currentPage: 1,
};
},
}
</script>
此時頁面的樣子如下：
這個時候我們假如我們要的主題顏色是粉色：pink
那我們按照每個組件文檔最下面的樣式變量可知我們需要修改的是 @grid-item-text-color 和 @pagination-item-default-color 剃执。
三誓禁、開始配置定制主題色
官網(wǎng)鏈接——定制主題
我們看官網(wǎng)上有兩個地方對版本號有限制，分別是babel和less-loader
這個時候我們需要看一下項(xiàng)目中相對應(yīng)的babel和less-loader的版本號了肾档。在命令行輸入npm list @babel/core 和 npm list less-loader 即可摹恰。
此時babel.config.js文件的樣子是：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
//指定樣式的路徑
style: (name) => `${name}/style/less`,
}, 'vant']
]
}
然后我們在main.js文件（在App.vue文件中引入也可以）中按需引入兩個組件的less文件。
import 'vant/lib/grid-item/style/less'
import 'vant/lib/pagination/style/less'
最后怒见，在vue.config.js中（沒有的話就重新創(chuàng)建一個）更改這兩個主題變量
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
//在這里覆蓋變量俗慈，需要用那個主題變量就在這里更改
'@grid-item-text-color': 'pink',
'@pagination-item-default-color': 'pink',
},
},
},
},
};
設(shè)置完這些后，重新啟動 項(xiàng)目npm run serve遣耍。然后這個時候主題顏色就被改了過來闺阱。
less文件覆蓋
如果需要改的變量太多，那么可以使用第二種方法——通過less文件覆蓋舵变。
在src文件夾下創(chuàng)建一個less文件：vant-modified-vars.less酣溃。（其實(shí)這個文件在哪里創(chuàng)建都無所謂，只要能找到這個文件就行）棋傍，然后將需要改寫的變量放入進(jìn)去救拉。
//vant-modified-vars.less
@grid-item-text-color: pink;
@pagination-item-default-color: pink;
然后vue.config.js文件修改一下配置選項(xiàng)
css: {
loaderOptions: {
less: {
modifyVars: {
//使用這個文件覆蓋變量，這個文件的路徑一定要是絕對路徑
hack: `true; @import "/src/vant-modified-vars.less";`,
},
},
},
},
四瘫拣、結(jié)語
第一次寫這么長這么詳細(xì)的文章亿絮，總算是把一次解決問題的流程給記錄下來了。希望如果以后有小伙伴需要配置定制主題的時候能夠提供些幫助麸拄。
