vant组件库的使用 - - - vue2篇&小程序篇

vue2 篇官方文档

安装 vant 组件库

npm install vant

安装好后

组件引入方法

一、全局引入（引入所有组件会增加代码包体积，官方不推荐）

在 main.js 文件中添加上

import Vant from "vant"
import 'vant/lib/index.css';
Vue.use(Vant)

在其他 vue 文件可以直接使用

<van-button type="default>默认按钮</van-button>

二、单个文件引入

直接在 vue 文件里添加

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

在 components 注册一下 Button 组件

然后可以直接使用

<Button type="default">默认按钮</Button>

三、局部组件引入

在 main.js 中添加

import { Button } from 'vant';
import "vant/lib/button/style";
Vue.use(Button);

在其他 vue 文件可以直接使用

<van-button type="default">默认按钮</van-button>

四、自动按需引入插件（官方推荐）

参考官方文档 引入组件

小程序篇官方文档

创建项目后
打开终端
使用

npm init

初始化组件库
然后使用

npm i @vant/weapp -S --production

安装 Vant Weapp
点击上方导航栏 - - - 工具 - - - 构建 npm
完成后会生成一个 miniprogram_npm 这个玩意
然后右上角 - - - 详情里的使用 npm 模块勾上

然后就可以引入组件了

组件引入方法

一、全局引入（不推荐，推荐局部引入，用哪个就在用的页面的 json 文件引入哪个）

在 app.json 文件加入

"usingComponents": {
    "van-button": "/miniprogram_npm/@vant/weapp/button"
}

“usingComponents” 内为要使用的组件
然后在 wxml 直接使用即可

<van-button type="default">默认按钮</van-button>

这个应该挺全的
app.json 文件加

"usingComponents": {
    "van-action-sheet": "./miniprogram_npm/@vant/weapp/action-sheet/index",
    "van-area": "./miniprogram_npm/@vant/weapp/area/index",
    "van-button": "./miniprogram_npm/@vant/weapp/button/index",
    "van-card": "./miniprogram_npm/@vant/weapp/card/index",
    "van-cell": "./miniprogram_npm/@vant/weapp/cell/index",
    "van-cell-group": "./miniprogram_npm/@vant/weapp/cell-group/index",
    "van-checkbox": "./miniprogram_npm/@vant/weapp/checkbox/index",
    "van-checkbox-group": "./miniprogram_npm/@vant/weapp/checkbox-group/index",
    "van-col": "./miniprogram_npm/@vant/weapp/col/index",
    "van-count-down": "./miniprogram_npm/@vant/weapp/count-down/index",
    "van-dialog": "./miniprogram_npm/@vant/weapp/dialog/index",
    "van-divider": "./miniprogram_npm/@vant/weapp/divider/index",
    "van-field": "./miniprogram_npm/@vant/weapp/field/index",
    "van-goods-action": "./miniprogram_npm/@vant/weapp/goods-action/index",
    "van-goods-action-icon": "./miniprogram_npm/@vant/weapp/goods-action-icon/index",
    "van-goods-action-button": "./miniprogram_npm/@vant/weapp/goods-action-button/index",
    "van-icon": "./miniprogram_npm/@vant/weapp/icon/index",
    "van-image": "./miniprogram_npm/@vant/weapp/image/index",
    "van-loading": "./miniprogram_npm/@vant/weapp/loading/index",
    "van-nav-bar": "./miniprogram_npm/@vant/weapp/nav-bar/index",
    "van-notice-bar": "./miniprogram_npm/@vant/weapp/notice-bar/index",
    "van-notify": "./miniprogram_npm/@vant/weapp/notify/index",
    "van-panel": "./miniprogram_npm/@vant/weapp/panel/index",
    "van-popup": "./miniprogram_npm/@vant/weapp/popup/index",
    "van-progress": "./miniprogram_npm/@vant/weapp/progress/index",
    "van-radio": "./miniprogram_npm/@vant/weapp/radio/index",
    "van-radio-group": "./miniprogram_npm/@vant/weapp/radio-group/index",
    "van-row": "./miniprogram_npm/@vant/weapp/row/index",
    "van-search": "./miniprogram_npm/@vant/weapp/search/index",
    "van-sidebar": "./miniprogram_npm/@vant/weapp/sidebar/index",
    "van-sidebar-item": "./miniprogram_npm/@vant/weapp/sidebar-item/index",
    "van-slider": "./miniprogram_npm/@vant/weapp/slider/index",
    "van-stepper": "./miniprogram_npm/@vant/weapp/stepper/index",
    "van-steps": "./miniprogram_npm/@vant/weapp/steps/index",
    "van-sticky": "./miniprogram_npm/@vant/weapp/sticky/index",
    "van-submit-bar": "./miniprogram_npm/@vant/weapp/submit-bar/index",
    "van-swipe-cell": "./miniprogram_npm/@vant/weapp/swipe-cell/index",
    "van-uploader": "./miniprogram_npm/@vant/weapp/uploader/index",
    "van-switch": "./miniprogram_npm/@vant/weapp/switch/index",
    "van-tab": "./miniprogram_npm/@vant/weapp/tab/index",
    "van-tabs": "./miniprogram_npm/@vant/weapp/tabs/index",
    "van-tabbar": "./miniprogram_npm/@vant/weapp/tabbar/index",
    "van-tabbar-item": "./miniprogram_npm/@vant/weapp/tabbar-item/index",
    "van-tag": "./miniprogram_npm/@vant/weapp/tag/index",
    "van-toast": "./miniprogram_npm/@vant/weapp/toast/index",
    "van-transition": "./miniprogram_npm/@vant/weapp/transition/index",
    "van-tree-select": "./miniprogram_npm/@vant/weapp/tree-select/index",
    "van-datetime-picker": "./miniprogram_npm/@vant/weapp/datetime-picker/index",
    "van-rate": "./miniprogram_npm/@vant/weapp/rate/index",
    "van-collapse": "./miniprogram_npm/@vant/weapp/collapse/index",
    "van-collapse-item": "./miniprogram_npm/@vant/weapp/collapse-item/index",
    "van-picker": "./miniprogram_npm/@vant/weapp/picker/index",
    "van-overlay": "./miniprogram_npm/@vant/weapp/overlay/index",
    "van-circle": "./miniprogram_npm/@vant/weapp/circle/index",
    "van-index-bar": "./miniprogram_npm/@vant/weapp/index-bar/index",
    "van-index-anchor": "./miniprogram_npm/@vant/weapp/index-anchor/index",
    "van-grid": "./miniprogram_npm/@vant/weapp/grid/index",
    "van-grid-item": "./miniprogram_npm/@vant/weapp/grid-item/index",
    "van-dropdown-menu": "./miniprogram_npm/@vant/weapp/dropdown-menu/index",
    "van-dropdown-item": "./miniprogram_npm/@vant/weapp/dropdown-item/index",
    "van-skeleton": "./miniprogram_npm/@vant/weapp/skeleton/index",
    "van-calendar": "./miniprogram_npm/@vant/weapp/calendar/index"
},

app.wxss 文件加

@import '/miniprogram_npm/@vant/weapp/common/index.wxss';

二、局部引入

在需要使用组件的页面的 json 文件的"usingComponents" (使用组件)内加入想要使用的组件即可

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

然后在 wxml 里就可以使用了

<van-button type="default">默认按钮</van-button>

❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀

Written ❤️ sywdebug.