
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.
更多推荐
所有评论(0)