使用vue-cli4創建一個vue項目

//vue-cli@4.2.3
vue create vant-demo

根據自己的需要選擇對應的配置，此處略過。。。
PS:因為vantUI使用的是less預處理器，配置時建議選擇此處理器。

安裝vantUI,按需引入

安裝vantUI

npm i vant -S

按需引入

babel-plugin-import是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

npm i babel-plugin-import -D

通過vue-cli4創建項目的時候，由於內部集成了babel，在項目的根目錄有babel.config.js文件，在此文件添加配置。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

main.js引入vantUI組件

因為每個組件都需要使用Vue.use()註冊，可以直接使用Array遍歷，因為使用了babel-plugin-import插件，按需引入的方式，所以可以不需要寫每個組件的style。

import {Button,RadioGroup, Radio} from 'vant'

[Button,RadioGroup,Radio].forEach(e=>{
  Vue.use(e)
})

在項目中及直接用對應的組件即可

效果：

適配Rem

Vant 中的樣式默認使用px作為單位，移動端使用Rem會更好，官方文檔推薦使用一下兩個工具：

• postcss-pxtorem是一款 postcss 插件，用於將單位轉化為 rem
• lib-flexible用於設置 rem 基準值

分別安裝

npm install postcss-pxtorem -D

npm i amfe-flexible

安裝好後，在main.js引入amfe-flexible

import  'amfe-flexible/index.js'

如果項目根目錄有postcss.config.js文件直接打開，沒有就直接創建一個，在根目錄啊，別跑偏了（哈哈）！

//postcss.config.js
module.exports = {
    plugins: {
      'autoprefixer': {
        overrideBrowserslist: [
          'Android 4.1',
          'iOS 7.1',
          'Chrome > 31',
          'ff > 31',
          'ie >= 8'
        ]
      },
      'postcss-pxtorem': {
        rootValue: 37.5,
        propList: ['*']
      }
    }
}

PS：375px 即100%寬度，寫px會自動rem處理，如果不想被rem處理，可以使用PX來寫。

測試一下：

顯示

自定義主題

Vant 使用了Less對樣式進行預處理，並內置了一些樣式變量，通過替換樣式變量即可定製你自己需要的主題。

下面是一些基本的樣式變量，所有可用的顏色變量請參考配置文件。

// Component Colors  
@text-color:  #323233; 
@border-color:  #ebedf0;
@active-color:  #f2f3f5; 
@background-color:  #f7f8fa; 
@background-color-light:  #fafafa;

按需引入時，自定義主題

更改babel.config.js文件，由於上面步驟引入了，這裏稍微更改點就行

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      // style: true
      style: name => `${name}/style/less`
    }, 'vant']
  ]
}

根目錄創建vue.config.js文件，內容如下：

module.exports = {
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    'radio-checked-icon-color': '#f20000',
                }
            }
        }
    }
};

所有可用的顏色變量請參考配置文件

重啓項目

npm run serve

還可以單獨引入一個像是文件，配置主題顏色
新建一個theme.less文件
內容如下：

@radio-checked-icon-color:#00f228;

修改vue.config.js文件

重啓項目

npm run serve

全部引入和單獨引入style時，自定義主題

引入樣式時，要把css改成less

// 引入全部樣式  import  'vant/lib/index.less'; 
// 引入單個組件樣式  import  'vant/lib/button/style/less';