在原生小程序 vue，mpvue中关于vant组件库的引入的那些坑
原生小程序中引入vant框架的方法
先在项目文件下 cmd进入终端
npm init -y 生成一个package-lock.json文件 进行初始化项目配置
引入vant 包 ：npm install vant --save
或者npm i @vant/weapp -S --production
然后在详情中勾选下列选项
这里es6转es5可勾可不勾
一定要勾选使用npm模块
然后在开发者工具中 工具–>构建npm
接下来就可以看到一个 miniprogram_npm的文件夹
在app.json中或者index.json中添加 配置
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-slider":"@vant/weapp/slider/index",
"van-tree-select":"@vant/weapp/tree-select/index",
"van-popup": "@vant/weapp/popup/index",
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-icon": "@vant/weapp/icon/index",
"van-image": "@vant/weapp/image/index",
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index",
"van-transition": "@vant/weapp/transition/index",
"van-calendar": "@vant/weapp/calendar/index",
"van-uploader": "@vant/weapp/uploader/index",
"van-action-sheet": "@vant/weapp/action-sheet/index",
"van-goods-action": "@vant/weapp/goods-action/index",
"van-goods-action-icon": "@vant/weapp/goods-action-icon/index",
"van-goods-action-button": "@vant/weapp/goods-action-button/index",
"van-submit-bar": "@vant/weapp/submit-bar/index",
"van-grid": "@vant/weapp/grid/index",
"van-grid-item": "@vant/weapp/grid-item/index"
},
在index.wxml中引入组件
<van-slider value="50" bar-height="4px" active-color="#ee0a24" />
<van-cell title="展示弹出层" is-link bind:click="showPopup" />
<van-popup
show="{
{ show }}"
round
position="bottom"
custom-style="height: 20%"
bind:close="onClose"
/>
<van-row gutter="20">
<van-col span="8" bindtap="a">付款van-col>
<van-col span="8">待付款van-col>
<van-col span="8">已付款van-col>
van-row>
<van-transition name="fade-up" />
<van-transition
show="{
{ show }}"
name="fade-up"
duration="{
{ { enter: 300, leave: 1000 } }}"
enter-class="van-enter-class"
enter-active-class="van-enter-active-class"
leave-active-class="van-leave-active-class"
leave-to-class="van-leave-to-class"
/>
<van-cell title="选择单个日期" value="{
{ date }}" bind:click="onDisplay" />
<van-calendar show="{
{ show }}" bind:close="onClose" bind:confirm="onConfirm" />
<van-cell title="选择多个日期" value="{
{ count }}" bind:click="onDisplay" />
<van-calendar
show="{
{ show }}"
type="multiple"
bind:close="onClose"
bind:confirm="onConfirm"
/>
<van-uploader
file-list="{
{ fileList }}"
use-before-read
bind:before-read="beforeRead"
bind:after-read="afterRead"
/>
<van-action-sheet
show="{
{ isShow }}"
actions="{
{ actions }}"
cancel-text="取消"
/>
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />
<van-goods-action-button
text="加入购物车"
type="warning"
bind:click="onClickButton"
/>
<van-goods-action-button text="立即购买" bind:click="onClickButton" />
van-goods-action>
以下是简单的试例效果图：
在mpvue中引入vant
首先创建一个mpvue项目
npm -v 检查npm的版本
npm install --global vue-cli 全局安装脚手架
vue init mpvue/mpvue-quickstart myVue 初始化项目
npm init -y 生成一个package-lock.json文件 进行初始化项目配置
引入vant 包 ：npm install vant --save
或者npm i @vant/weapp -S --production
在这里要在详情中将es6转es5的选项勾选，不然会出现99+报错
cd mpvue
npm run dev 运行mpvue
先将@vant中dist文件夹里面的所有项目拷贝到static文件夹中新建的Van文件夹中
在单个页面中 main.json中引入子组件
在index.vue文件中引入组件
{
"navigationBarTitleText": "首页",
"usingComponents": {
"van-tab": "../../../static/Van/tab/index",
"van-tabs": "../../../static/Van/tabs/index"
}
}
<template>
<div class="container">
<van-tabs bind:click="onClick" class="tabBar">
<van-tab title="电影">内容 1van-tab>
<van-tab title="演出">内容 2van-tab>
van-tabs>
div>
template>
<script>
export default {
data() {
return {
active: 1,
}
},
methods: {
bindViewTap() {
const url = '../logs/main'
if (mpvuePlatform === 'wx') {
mpvue.switchTab({
url })
} else {
mpvue.navigateTo({
url })
}
},
clickHandle(ev) {
console.log('clickHandle:', ev)
// throw {message: 'custom test'}
},
onChange(event) {
wx.showToast({
title: `切换到标签 ${
event.detail.name}`,
icon: 'none',
});
},
},
created() {
// let app = getApp()
}
}
script>
<style scoped>
.tabBar{
width:100%;
}
style>
在vue中引入vant框架
先下载按需引入插件：
npm i babel-plugin-import -D
在.babelrc的plugin中配置
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
在script中引入
import Vue from 'vue';
import {
Button } from 'vant';
Vue.use(Button);
在html中引入组件
<van-button type="default">默认按钮van-button>
<van-button type="primary">主要按钮van-button>
<van-button type="info">信息按钮van-button>
<van-button type="warning">警告按钮van-button>
<van-button type="danger">危险按钮van-button>
效果如下
希望以上总结能够对各位有所帮助，谢谢~