mpvue项目引入第三方ui组件,这里我用的是vant Weapp举栗子
下载组件
在github上下载压缩包
下载地址:https://github.com/youzan/vant-weapp
下载完之后,解压,把里面dist重命名为vant,然后把整个文件夹放到mpvue项目中dist文件夹内
然后在路由的文件引入 src/router/router.js
module.exports = [
{
path: '/pages/login/index',
name: 'login',
config: { // 页面配置,即 page.json 的内容,可选
navigationBarTitleText: '登录',
enablePullDownRefresh: true
}
},
{
path: '/pages/home/index',
name: 'home',
config: { // 页面配置,即 page.json 的内容,可选
navigationBarTitleText: '首页',
enablePullDownRefresh: true,
"usingComponents":{
"van-tab":"../../vant/tab/index",
"van-tabs":"../../vant/tabs/index",
"van-button":"../../vant/button/index",
"van-radio":"../../vant/radio/index",
"van-radio-group":"../../vant/radio-group/index",
"van-checkbox": "../../vant/checkbox/index",
"van-checkbox-group": "../../vant/checkbox-group/index",
"van-picker": "../../vant/picker/index",
"van-popup": "../../vant/popup/index",
"van-datetime-picker": "../../vant/datetime-picker/index"
}
}
}
]
在src/pages/home/index.vue中使用
<van-popup
:show="showPopup"
position="bottom"
custom-style="height: 40%;"
@close="onClose"
>
<van-picker
show-toolbar
title="测试"
v-if="showSpecialty"
:columns="selectSpecialty"
:default-index="0"
@change="specialtyChange"
value-key="name"
@cancel="onClose"
@confirm="onConfirmSpecialty"
/>
<van-datetime-picker
v-if="showStartTime"
type="date"
:value="startTime"
title="开始时间"
@confirm="onConfirmStartTime"
@cancel="onClose"
/>
<van-datetime-picker
v-if="showEndTime"
type="date"
:value="endTime"
title="结束时间"
@confirm="onConfirmEndTime"
@cancel="onClose"
/>
</van-popup>
<van-button @click="showBtn"></van-button>
然后npm run dev重新编译就可以拉