前言

vant是vue開發者常用的ui元件庫，按需引入vue專案的方法，參考官網的操作即可，但是如果使用ts來編寫專案，按需引入方式就大大的不同了，我們分別看下2中方式按需接入vant的區別：

vue + js

我們需要藉助babel 外掛按需引入元件， 在.babelrc 或 babel.config.js 中新增配置：

{
 "plugins": [
   [
     "import",
     {
       "libraryName": "vant",
       "libraryDirectory": "es",
       "style": true
     }
   ]
 ]
}
 

接著你可以在程式碼中直接引入 Vant 元件，外掛會自動將程式碼轉化為按需引入的形式。

// 原始程式碼
import { Button } from 'vant';
components: {
  [Button.name]: Button
}
// 編譯後代碼
import Button from 'vant/es/button';
import 'vant/es/button/style';

vue3+typescript

vant官網有這麼一句話，如果你在使用 TypeScript，可以使用ts-import-plugin實現按需引入。

我們點選這個連結，找到ts-loader處，我們要修改2個地方，看下圖：

接下來，我們要修改vue-cli的內部webpack的配置，不熟悉的同學可以參考vue-cli官網webpack相關的內容，來修改webpack的配置。
這裡我們使用chainWebpack來按照以上的使用說明，來修改配置。在修改之前，我們首先要做的是檢視一下現有的webpack配置,vue-cli 也給我們提供了這個能力審查專案的 webpack 配置
我們執行：

vue inspect > output.js

可以在我們的根目錄看到一個output.js檔案，裡面的內容就是webpack的配置。我搜索到 ts-loader處：

/* config.module.rule('ts').use('ts-loader') */
          {
            loader: '/Users/wangdonghai/Documents/WDH_library/youxin_workspace/account-overseas/node_modules/ts-loader/index.js',
            options: {
              transpileOnly: true,
              appendTsSuffixTo: [
                '\\.vue$'
              ],
              happyPackMode: false
            }
          }
 

我們需要將官網要求的配置內容，配置進這個裡面：
在vue.config.js檔案裡執行以下程式碼：

const { merge } = require('webpack-merge')
const tsImportPluginFactory = require('ts-import-plugin')
module.exports = {
  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
            })
  }
}

我們再次執行 vue inspect > output.js看修改後的配置：
可以看到，我們的配置已經被新增進來了。

 /* config.module.rule('ts').use('ts-loader') */
          {
            loader: '/Users/wangdonghai/Documents/WDH_library/youxin_workspace/account-overseas/node_modules/ts-loader/index.js',
            options: {
              transpileOnly: true,
              appendTsSuffixTo: [
                '\\.vue$'
              ],
              happyPackMode: false,
              getCustomTransformers: function () { /* omitted long function */ },
              compilerOptions: {
                module: 'es2015'
              }
            }
          }

接下來，我們就可以在vue3.0+typescript 專案的單檔案元件裡直接使用了，實現vant元件的按需引入：

import { Form, Field, Button } from 'vant'
components: {
        [Form.name]: Form,
        [Field.name]: Field,
        [Button.name]: Button,
    },