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

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