本来我以为主题配置应该很简单，按照vant官网上面的来不就完事了。可是我自己试着做的时候并不是一番风顺的。过程可谓是曲折。这篇文章是我成功之后总结出来的步骤。在这期间遇到的坑之后再记录一次。
一、先创建项目
在命令行输入vue create vant-theme-test创建项目
一般来说，使用vant的项目，css预处理器一般会选择less，所以这次我们创建项目就使用less。
接下来，静等一段时间安装完毕依赖。
等安装完毕之后，执行 npm i vant -S 安装Vant，然后按照官网的教程设置“按需引入组件”——按需引入组件
二、引入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 。
三、开始配置定制主题色
官网链接——定制主题
我们看官网上有两个地方对版本号有限制，分别是babel和less-loader
这个时候我们需要看一下项目中相对应的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中（没有的话就重新创建一个）更改这两个主题变量
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
//在这里覆盖变量，需要用那个主题变量就在这里更改
'@grid-item-text-color': 'pink',
'@pagination-item-default-color': 'pink',
},
},
},
},
};
设置完这些后，重新启动 项目npm run serve。然后这个时候主题颜色就被改了过来。
less文件覆盖
如果需要改的变量太多，那么可以使用第二种方法——通过less文件覆盖。
在src文件夹下创建一个less文件：vant-modified-vars.less。（其实这个文件在哪里创建都无所谓，只要能找到这个文件就行），然后将需要改写的变量放入进去。
//vant-modified-vars.less
@grid-item-text-color: pink;
@pagination-item-default-color: pink;
然后vue.config.js文件修改一下配置选项
css: {
loaderOptions: {
less: {
modifyVars: {
//使用这个文件覆盖变量，这个文件的路径一定要是绝对路径
hack: `true; @import "/src/vant-modified-vars.less";`,
},
},
},
},
四、结语
第一次写这么长这么详细的文章，总算是把一次解决问题的流程给记录下来了。希望如果以后有小伙伴需要配置定制主题的时候能够提供些帮助。
