22、vant-ui 按需引入

vant-ui 按需引入

前言：之前写的都是全局引入，之后为了提高性能，我们使用按需引入，需要那个就引入那个。

一、安装
我们可以通过yarn来安装，速度快

yarn add vant -S

二、按需导入
安装插件：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
命令：yarn add babel-plugin-import -D 或者 npm i babel-plugin-import -D

安装之后，找到我们的 babel.config.js 文件
将以下代码复制进去：

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

注意！！！

然后我们都可以按需导入了

一、下载vant
1、第一步肯定是下载vant啦

// Vue 2 项目，安装 Vant 2：
npm i vant -S

// Vue 3 项目，安装 Vant 3：
npm i vant@next -S

二、自动按需引入组件 (推荐)
这种方式是通过一个插件。
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']
  ]
};

四、引入
1、首先我们创建一个js文件，这个js文件就来存放我们按需引入的组件。

import Vue from "vue";
// 首先引入我们的vue
import {
    
     Button, Cell, CellGroup } from 'vant'
// 按需引入我们使用的组件
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup );

// 使用我们的use方法

2、我们在main.js文件中引入这个js文件即可

import "./vant.js"

// 我们j按需引入js文件的路径

おすすめ