关于前端:vue3ts项目按需引入vant

我的项目是 wepback 的我的项目, 应用 vue3+ts
按需引入 wepback 前依照 vant 官网所说的,

装置最新版 vant, 接着因为是 vue3+ts, 所以 babel-plugin-import 无奈实现按需引入, 所以

第一步装置两个插件
npm i webpack-merge –save-dev
npm i -D ts-import-plugin
接着依照官网所说的, 在 webpack.config.js 进行配置, 因为我是应用 vue-cli4 构建的我的项目, 没有 webpack.config.js,
所以在 src 同级目录下创立 vue.config.js 文件
在外面配置

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

module.exports = {
  devServer: {
    // 端口号
    port: 3030,
  },
  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
      })
  },
}

接着就能够实现失常的按需引入啦
这里附上如何应用的代码

成果: