本來我以為主題配置應(yīng)該很簡(jiǎn)單，按照vant官網(wǎng)上面的來不就完事了?？墒俏易约涸囍龅臅r(shí)候并不是一番風(fēng)順的。過程可謂是曲折。這篇文章是我成功之后總結(jié)出來的步驟。在這期間遇到的坑之后再記錄一次。

一、先創(chuàng)建項(xiàng)目

在命令行輸入vue create vant-theme-test創(chuàng)建項(xiàng)目

我的環(huán)境版本

一般來說，使用vant的項(xiàng)目，css預(yù)處理器一般會(huì)選擇less，所以這次我們創(chuàng)建項(xiàng)目就使用less。

選擇的配置項(xiàng)

接下來，靜等一段時(shí)間安裝完畢依賴。

等安裝完畢之后，執(zhí)行 npm i vant -S 安裝Vant，然后按照官網(wǎng)的教程設(shè)置“按需引入組件”——按需引入組件

二、引入vant的某些組件

為了方便直觀，我們把App.vue文件清空，然后引入兩個(gè)組件，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>

此時(shí)頁面的樣子如下：

主題未改變的樣子

這個(gè)時(shí)候我們假如我們要的主題顏色是粉色：pink
那我們按照每個(gè)組件文檔最下面的樣式變量可知我們需要修改的是 @grid-item-text-color 和 @pagination-item-default-color 。

三、開始配置定制主題色

官網(wǎng)鏈接——定制主題

我們看官網(wǎng)上有兩個(gè)地方對(duì)版本號(hào)有限制，分別是babel和less-loader

babel6

less-loader

這個(gè)時(shí)候我們需要看一下項(xiàng)目中相對(duì)應(yīng)的babel和less-loader的版本號(hào)了。在命令行輸入npm list @babel/core 和 npm list less-loader 即可。

babel和less-loader的版本

此時(shí)babel.config.js文件的樣子是：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      //指定樣式的路徑
      style: (name) => `${name}/style/less`,
    }, 'vant']
  ]
}

然后我們?cè)趍ain.js文件（在App.vue文件中引入也可以）中按需引入兩個(gè)組件的less文件。

import 'vant/lib/grid-item/style/less'
import 'vant/lib/pagination/style/less'

最后，在vue.config.js中（沒有的話就重新創(chuàng)建一個(gè)）更改這兩個(gè)主題變量

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          //在這里覆蓋變量，需要用那個(gè)主題變量就在這里更改
          '@grid-item-text-color': 'pink',
          '@pagination-item-default-color': 'pink',
        },
      },
    },
  },
};

設(shè)置完這些后，重新啟動(dòng) 項(xiàng)目npm run serve。然后這個(gè)時(shí)候主題顏色就被改了過來。

主題改變之后的樣子

less文件覆蓋

如果需要改的變量太多，那么可以使用第二種方法——通過less文件覆蓋。
在src文件夾下創(chuàng)建一個(gè)less文件：vant-modified-vars.less。（其實(shí)這個(gè)文件在哪里創(chuàng)建都無所謂，只要能找到這個(gè)文件就行），然后將需要改寫的變量放入進(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: {
          //使用這個(gè)文件覆蓋變量，這個(gè)文件的路徑一定要是絕對(duì)路徑
          hack: `true; @import "/src/vant-modified-vars.less";`,
        },
      },
    },
  },

四、結(jié)語

第一次寫這么長(zhǎng)這么詳細(xì)的文章，總算是把一次解決問題的流程給記錄下來了。希望如果以后有小伙伴需要配置定制主題的時(shí)候能夠提供些幫助。