vant-ui 按需引入
① 第一步:先下载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']
]
};
④引入:
先创建一个js文件,存放我们按需引入的组件:
import Vue from "vue";
// 首先引入我们的vue
import { Button, Cell, CellGroup } from 'vant'
// 按需引入我们使用的组件
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup );
// 使用我们的use方法
在main.js文件中引入这个js文件:
import "./vant.js"
// 我们j按需引入js文件的路径