vant官网:https://vant-contrib.gitee.io/vant/#/zh-CN/theme

1. 安装 引入

打包的时候,vant组件不回被打包上去,所以可以一次性导入所有文件

// main.js
//导入并安装vant组件库
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

2.定制样式

步骤一 引入样式源文件

引入 Less 样式文件

// main.js
//导入并安装vant组件库
import Vant from 'vant';
//import 'vant/lib/index.css';
import 'vant/lib/index.less';

Vue.use(Vant);

步骤二 修改样式变量

根据自己的项目 分为 (看官方文档)：

1. webpack 配置
2. vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。

e.g. vue-cli项目：

1.在根目录下 新建vue.config.js文件

image.png

2.在新建的文件中添加如下的代码

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量，下面写入自己要的样式
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

image.png

方法一、直接覆盖：但是需要每次修改都要重启服务才会生效，所以不太会使用。

3. 写入自己要的样式

image.png

4.修改配置文件 需要重启服务才会生效

image.png

方法二、
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）

image.png