mpvue+vant app搭建微信小程序的方法步骤

mpvue使用

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

vant使用

yarn add vant

# 将node_modules下的vant-weapp下的dist目录复制到static下的vant目录即可调用

vant调用

main.json中调用

{
"navigationBarTitleText": "Home",
"usingComponents": {
"van-button": "../../static/vant/button/index",
"van-search": "../../static/vant/search/index",
"van-tabbar": "../../static/vant/tabbar/index",
"van-tabbar-item": "../../static/vant/tabbar-item/index",
}
}

index.vue中使用

<van-search
placeholder="请输入搜索关键词"
use-action-slot
bind:search="onSearch"
>
<view slot="action" bind:tap="onSearch">搜索</view>
</van-search>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• 微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
• 使用Vue.js开发微信小程序开源框架mpvue解析
• 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
• 微信小程序 使用picker封装省市区三级联动实例代码
• 微信小程序 省市区选择器实例详解(附源码下载)
• 微信小程序实现省市区三级地址选择
• mpvue微信小程序多列选择器用法之省份城市选择的实现