vant ui 按需引入組件的方式

第一步：

babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

# 安裝插件 npm i babel-plugin-import -D 

// 在.babelrc 中添加配置 // 注意：webpack 1 無需設置 libraryDirectory { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] } // 對於使用 babel7 的用戶，可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] }; 

// 接着你可以在代碼中直接引入 Vant 組件 // 插件會自動將代碼轉化為方式二中的按需引入形式 import { Button } from 'vant';

export default {
  name: 'Home',
  components: {
    [Button.name]: Button,
    HelloWorld
  }
}