babel-plugin-import 插件 的使用

郝原
2023-12-01

     babel-plugin-import   是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

以Vant 为例:

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


// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意:webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
 

接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为按需引入形式

以 Vue-cli为例,在main.js 中 按需引入

import { Button, Cell } from 'vant';
Vue.use(Button);

然后在组件中 直接使用即可

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="danger">危险按钮</van-button>


Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。我们会在此基础上不断完善,开发更多实用的组件。相关链接:https://segmentfault.com/a/1190000011377961

最后 附上 Vant 文档:https://youzan.github.io/vant/#/zh-CN/intro

 类似资料: