最近要快速开发个小程序，心想着要是按微信推荐那样开发得累死，所以研究了下如何使用mpvue+Vant+npm快速构建微信小程序。

基础架子

项目地址：[mpvue.com](http://mpvue.com/ "mpvue.com")

首先用mpvue来拉一个基础的架子，这样方便我们后续集成一些其他的东西。

 1#安装vue-cli，有可以跳过
 2npm install -g vue-cli@2.9
 3
 4#使用vue-cli创建mpvue项目
 5vue init mpvue/mpvue-quickstart 你的项目名
 6
 7#安装依赖啥的
 8cd 你的项目目录
 9yran
10yarn dev

Error:注意： 受微信动态增删改查 wxml 节点信息限制，某些VUE组件用不了。详细可看官方说明~

集成npm

首先在你的项目目录下，新建lib目录，用处存放第三方npm包。

然后创建一个新的npm项目

1yarn init

一路回车即可

然后安装你需要的npm包

Error:注意： 受微信限制，某些npm无法直接使用，例如jQuery，lodash

配置微信小程序相关配置文件，mpvue的是project.config.json

1{
2	"packNpmManually": true,
3	"packNpmRelationList": [
4	{
5	"packageJsonPath": "./lib/package.json",
6	"miniprogramNpmDistDir": "./static"
7	}
8	],
9}

配置微信小程序npm支持和构建路径

info:因为小程序能用npm需要通过微信开发者工具进行npm构建，所以不能直接安装在mpvue项目中。

使用微信开发者工具构建npm

集成Vant

项目地址：[Vant](https://vant-contrib.gitee.io/vant-weapp/#/home")

按官方说明，配置即可

Error:注意：此处操作应在lib目录下！

1yarn add @vant/weapp --production

小程序使用的第三方npm包

引入Vant到小程序中，按需引用即可

在app.json里配置组件引用

Error:注意：此处应加上相对路径"./static/miniprogram_npm/"，不然可能找不到组件。

当然，也可以在对应的页面中直接引入，请注意路径

结束

ok，现在就基本配置完成了~