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文件的路径