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

更新时间：2019年02月11日 09:10:47 作者：hirCodd

这篇文章主要介绍了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>

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

您可能感兴趣的文章:

vue.js踩坑之ref引用细节点讲解
这篇文章主要介绍了vue.js踩坑之ref引用细节点讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue3在jsx中使用component组件方式
这篇文章主要介绍了vue3在jsx中使用component组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
详解vue slot插槽的使用方法
本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue activated在子组件中的使用详情
这篇文章主要介绍了vue activated在子组件中的使用，文章围绕vue activated的xingu你资料讲解展开内容并附上具体代码,需要的朋友可以参考一下
2021-11-11
vue引用外部JS的两种种方法
这篇文章主要介绍了vue引用外部JS的两种种方案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
详谈vue中router-link和传统a链接的区别
这篇文章主要介绍了详谈vue中router-link和传统a链接的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
详解Vue中Axios封装API接口的思路及方法
这篇文章主要介绍了详解Vue中Axios封装API接口的思路及方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
vue中自定义组件双向绑定的三种方法总结
这篇文章主要介绍了vue中自定义组件双向绑定的三种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
基于vue2的canvas时钟倒计时组件步骤解析
今天给大家介绍一款基于vue2的canvas时钟倒计时组件，这个时钟倒计时组件采用canvas动画的炫酷动画效果形式，根据剩余时间的多少变换颜色和旋转扇形的速度，适合抢购、拍卖、下注等业务场景，且对移动端友好,需要的朋友可以参考下
2018-11-11
vue2滚动条加载更多数据实现代码
本篇文章主要介绍了vue2滚动条加载更多数据实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01