Vant-ui 按需引入（读者说）

最新推荐文章于 2022-03-23 10:33:43 发布

原创最新推荐文章于 2022-03-23 10:33:43 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

vant

1 篇文章

订阅专栏

本文介绍了如何按需引入 Vant-ui，包括安装 babel 插件，创建 .babel.config.js 文件并配置，以及在项目中按需引入所需组件。

Vant-ui 按需引入

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

第一步安装插件

  npm i babel-plugin-import -D

第二步创建.babel.config.js文件*

module.exports = {
  plugins: [
        ['import', {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true
        }, 'vant']
   ]

第三步所需组件中引入

<van-nav-bar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
-------------------------------------------------------------------------------
  import { NavBar } from 'vant'   //按需引入(导航栏NavBar)
   components: {
        [NavBar.name]: NavBar     //注册单个的组件
  }