uniapp 引入vant(uniapp引入vuex)

作者:电脑培训网 2024-04-27 17:50:30 300

在uniapp项目中引入vant-Weapp1.首先在根目录下创建wxcomponents文件夹

2.打开下载最新的vant-Weapp

uniapp 引入vant(uniapp引入vuex)

3、我们下载的vant-weapp文件中只剩下dist,其余的都可以删除,然后将vant-weapp放入wxcomponents中。

4.App.vue中引入vant样式

@import'/wxcomponents/vant-weapp/dist/common/index.wxss'

5.然后在pages.json中引入

'使用组件':{

'van-button':'/wxcomponents/vant-weapp/dist/button/index'

}

6、然后在页面引入按钮

7、此时页面会报错。注意:

8.然后就可以看到页面的组件出来了。

9.以下为全局介绍

10.分享一些常用的组件。您可以直接将它们复制到您的usingComponents下面的页面中并直接使用它们。

'usingComponents':{//为了方便,所有组件都全局引入。您还可以在页面下单独引用组件。'van-action-sheet':'/wxcomponents/vant-weapp/dist/action-sheet/index','van-area':'/wxcomponents/vant-weapp/dist/area/index',//'van-badge':'/wxcomponents/vant-weapp/dist/badge/index',//'van-badge-group':'/wxcomponents/vant-weapp/dist/badge-group/index','van-button':'/wxcomponents/vant-weapp/dist/button/index','van-card':'/wxcomponents/vant-weapp/dist/card/index','van-cell':'/wxcomponents/vant-weapp/dist/cell/index','van-cell-group':'/wxcomponents/vant-weapp/dist/cell-group/index','van-checkbox':'/wxcomponents/vant-weapp/dist/checkbox/index','van-checkbox-group':'/wxcomponents/vant-weapp/dist/checkbox-group/index','van-col':'/wxcomponents/vant-weapp/dist/col/index','van-dialog':'/wxcomponents/vant-weapp/dist/dialog/index','van-field':'/wxcomponents/vant-weapp/dist/field/index','van-goods-action'第:章':'Goods-action-button':'/wxcomponents/vant-weapp/dist/goods-action-button/index','van-icon':'/wxcomponents/vant-weapp/dist/icon/index','van-loading':'/wxcomponents/vant-weapp/dist/loading/index','van-nav-bar':'/wxcomponents/vant-weapp/dist/nav-bar/index','van-notice-bar'第:章'/wxcomponents/vant-weapp/dist/notice-bar/index','van-notify':'/wxcomponents/vant-weapp/dist/notify/index','van-panel':'/wxcomponents/vant-weapp/dist/panel/index','van-popup':'/wxcomponents/vant-weapp/dist/popup/index','van-progress':'/wxcomponents/vant-weapp/dist/progress/index','van-radio':'/wxcomponents/vant-weapp/dist/radio/index','van-radio-group':'/wxcomponents/vant-weapp/dist/radio-group/index','van-row':'/wxcomponents/vant-weapp/dist/row/index','van-search':'/wxcomponents/vant-weapp/dist/search/index','van-slider':'/wxcomponents/vant-weapp/dist/slider/index','van-stepper':'/wxcomponents/vant-weapp/dist/stepper/index','van-steps':'/wxcomponents/vant-weapp/dist/steps/索引','van-submit-bar':'/wxcomponents/vant-weapp/dist/submit-bar/index','van-swipe-cell':'/wxcomponents/vant-weapp/dist/swipe-cell/index','van-switch':'/wxcomponents/vant-weapp/dist/switch/index',//'van-switch-cell':'/wxcomponents/vant-weapp/dist/switch-cell/index','van-tab':'/wxcomponents/vant-weapp/dist/tab/index','van-tabs':'/wxcomponents/vant-weapp/dist/tabs/index','van-tabbar':'/wxcomponents/vant-weapp/dist/tabbar/index','van-tabbar-item':'/wxcomponents/vant-weapp/dist/tabbar-item/index','van-tag':'/wxcomponents/vant-weapp/dist/tag/index','van-toast':'/wxcomponents/vant-weapp/dist/toast/index','van-transition':'/wxcomponents/vant-weapp/dist/transition/index','van-tree-select':'/wxcomponents/vant-weapp/dist/tree-select/index','van-datetime-picker':'/wxcomponents/vant-weapp/dist/datetime-picker/index','van-rate':'/wxcomponents/vant-weapp/dist/rate/index','van-collapse':'/wxcomponents/vant-weapp/dist/collapse/index','van-collapse-item':'/wxcomponents/vant-weapp/dist/collapse-item/index','van-picker':'/wxcomponents/vant-weapp/dist/picker/index'}

以上是局部和全局的方法,记得点赞

相关推荐