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>