关于vant--ui按需引入的详解

一、安装vant–ui

npm install vant --save-dev  //安装vant
npm install element-ui --save-dev  //安装element-ui

二、全局引入

// 在src/main.js进行全局引入
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(vant)

三、按需引入

import Button from 'vant/lib/button'
import 'vant/lib/vant-css/base.css'
import 'vant/lib/vant-css/button.css'

四、使用babel-plugin-import（强烈推荐使用）

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

npm install babel-plugin-import --save-dev

在.babel中添加配置：

"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import",{
     "libraryName":"vant","style":true}]
  ]

在vue-cli3中配置如下：

在项目中的babel.config.js进行配置：

module.exports = {
     
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
     
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

在组件中直接引入vant插件，插件会自动将代码转化为方法二中的按需引入形式

import {
      Button } from 'vant