vue+ts使用vant按需加载引入组件

首先下载并安装ts-import-plugin

npm i -D ts-import-plugin

然后在vue.config.js中引入并配置

const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");

module.exports = {
  lintOnSave: true,
  chainWebpack: config => {
    config.module
      .rule("ts")
      .use("ts-loader")
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: "vant",
                libraryDirectory: "es",
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: "es2015"
          }
        });
        return options;
      });
  }
};

然后在所需的文件中就引入即可

import { List } from 'vant';

值得注意的是要以组件的形式使用

<List v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
</List>