vue+vant自定义主题

最近项目用到了vue和vant，以及自定义vant主题，记录主要步骤点如下：
1、首先需要全局安装vue-cli：

npm install -g @vue/cli

2、创建vue项目

vue create my-app

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。这里选择手动。

? Please pick a preset:
  default (babel, eslint)
> Manually select features

回车后选择以下配置：

? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

这里的CSS pre-processor 选择 Less。

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

稍等一会，项目就创建完毕啦。
进入项目目录：

cd my-app

运行项目：

npm run serve

打开浏览器看到如下界面，vue项目到此就创建成功啦。

image.png

3、安装Vant

npm i vant -S

package.json中看到vant，就安装完成了。

image.png

4、引入Vant
这里选择自动按需引入组件
安装babel插件

npm i babel-plugin-import -D

在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中按需引入，如下：

import { Button, Col, Row } from 'vant'
Vue.use(Button)
  .use(Col)
  .use(Row)

5、自定义Vant主题
src下新建style目录，新建myvant.less文件用于自定义vant主题样式。

image.png

可以根据需要修改vant基础样式变量，以适应项目需求，这里我改了@red，@blue等颜色。

image.png

也可以修改某个组件的样式变量。

image.png

vue.config.js中配置：
*myvant.less就是自定义主题的less文件。引入less文件，以下两种方式都可以。
方式一：

const path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        modifyVars: {
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${path.join(
            __dirname,
            './src/style/myvant.less'
          )}";`
        }
      }
    }
  }
}

方式二：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        modifyVars: {
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: 'true; @import "~@/style/myvant.less"'
        }
      }
    }
  }
}

6、查看效果
app.vue中引用组件

可以看到button的背景色，border-radius已经是myvant.less中定义的@green: #33f892;和@button-border-radius: 8px;
接下来就可以按项目需要自由发挥啦。

image.png