本文共 615 字，大约阅读时间需要 2 分钟。

mpvue + vant 开发微信小程序

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 安装 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 中使用：