基于mpvue+Vant+npm快速构建微信小程序

这篇文章距离上次修改已过1048天，其中的内容可能已经有所变动。

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

基础架子

项目地址：mpvue.com

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

#安装vue-cli，有可以跳过
npm install -g vue-cli@2.9

#使用vue-cli创建mpvue项目
vue init mpvue/mpvue-quickstart 你的项目名

#安装依赖啥的
cd 你的项目目录
yran
yarn dev

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

集成npm

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

然后创建一个新的npm项目

yarn init

一路回车即可

然后安装你需要的npm包

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

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

{
    "packNpmManually": true,
    "packNpmRelationList": [
    {
    "packageJsonPath": "./lib/package.json",
    "miniprogramNpmDistDir": "./static"
    }
    ],
}

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

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

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

集成Vant

项目地址：Vant

按官方说明，配置即可

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

yarn add @vant/weapp --production

小程序使用的第三方npm包

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

在app.json里配置组件引用

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

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

结束

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