欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vant组件库安装和使用-支持VUE、微信小程序

程序员文章站 2022-03-03 10:24:17
...

在github.com中 搜索 Vant 查看组件库的信息
https://vant-contrib.gitee.io/vant/#/zh-CN/ 组件文档
安装Vant

步骤一:下载两个模块

npm i vant@next -S

npm i babel-plugin-import -D

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。

步骤二:对于使用 babel的用户,在 babel.config.js 中配置

  1. module.exports = {
  2. presets: [
  3. '@vue/cli-plugin-babel/preset'
  4. ],
  5. plugins: [
  6. ['import', {
  7. libraryName: 'vant',
  8. libraryDirectory: 'es',
  9. style: true
  10. }, 'vant']
  11. ]
  12. }

步骤三:在main.js主入口文件中导入需要使用的组件

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. import 'vant/lib/index.css'
  6. import {PullRefresh,List,Popup,Grid,GridItem,AddressEdit,AddressList, Icon,SubmitBar,CheckboxGroup,SwipeCell,Stepper,Checkbox,Field,Form,Tag, Button, Image as VanImage, Card,Tab, Tabs, Swipe, SwipeItem,Lazyload,Badge,Sidebar, SidebarItem, Collapse, CollapseItem } from 'vant';
  7. createApp(App).use(Lazyload,{loading:require('./assets/images/default.png')})
  8. .use(Swipe)
  9. .use(SwipeItem)
  10. .use(Badge)
  11. .use(Sidebar)
  12. .use(SidebarItem)
  13. .use(Collapse)
  14. .use(CollapseItem) .use(Tab)
  15. .use(Tabs)
  16. .use(Card)
  17. .use(VanImage)
  18. .use(Tag)
  19. .use(Button)
  20. .use(Form)
  21. .use(Field)
  22. .use(Checkbox)
  23. .use(Stepper)
  24. .use(SwipeCell)
  25. .use(CheckboxGroup)
  26. .use(SubmitBar)
  27. .use(Icon)
  28. .use(AddressList)
  29. .use(AddressEdit)
  30. .use(GridItem)
  31. .use(Grid)
  32. .use(Popup)
  33. .use(List)
  34. .use(PullRefresh)
  35. .use(store)
  36. .use(router)
  37. .mount('#app')