vant-ui 按需引入

① 第一步:先下载vant:

// Vue 2 项目，安装 Vant 2：
npm i vant -S

// Vue 3 项目，安装 Vant 3：
npm i [email protected] -S
           

②第二步:把组件按需引入：

这种方式是通过一个插件。
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式：npm i babel-plugin-import -D
           

③配置:

在.babelrc 中添加配置
注意：webpack 1 无需设置 libraryDirectory
如果没有,就在项目的根目录下创建一个：
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}


对于使用 babel7 的用户,可以在 babel.config.js 中配置：
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
           

④引入:

先创建一个js文件,存放我们按需引入的组件:
import Vue from "vue";
// 首先引入我们的vue
import { Button, Cell, CellGroup } from 'vant'
// 按需引入我们使用的组件
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup );
// 使用我们的use方法


在main.js文件中引入这个js文件:
import "./vant.js"
// 我们j按需引入js文件的路径