vue-cli4建立vantUI項目，按需引入，適配Rem，自定義主題

使用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';