vant-ui 和 vue2.X 定制主题

1. 安装 vant 依赖

npm i vant -S

2. 注入到项目，本文以自动按需加载的方式

# 安装插件
npm i babel-plugin-import -D

// 在.babelrc 中添加配置

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// main组件中引入
import { Button } from 'vant';
Vue.use(Button)

3. 找到了源码中 vant/src/style/var.less

之后在自己的项目中建立一个文件，例如我的是 resetLess.less

在里面修改想要的颜色

4. 修改 build 下的 until.js

less: generateLoaders('less', {
      modifyVars: {
        'hack': `true; @import "${path.join(__dirname, '../src/common/resetLess.less')}"`
      }
    }),

5. 修改 .babelrc

["import", {
    "libraryName": "vant",
    "libraryDirectory": "es"
    // "style": true
  }]

这里注释掉了 // "style": true

6. 重启服务