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

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

最近要快速开发个小程序,心想着要是按微信推荐那样开发得累死,所以研究了下如何使用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
Error:注意:
受微信动态增删改查 wxml 节点信息限制,某些VUE组件用不了。详细可看官方说明~

集成npm

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

然后创建一个新的npm项目

yarn init

一路回车即可

然后安装你需要的npm包

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

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

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

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

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

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


集成Vant

项目地址:Vant

按官方说明,配置即可

Error:注意:此处操作应在lib目录下!
yarn add @vant/weapp --production

小程序使用的第三方npm包小程序使用的第三方npm包

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

在app.json里配置组件引用在app.json里配置组件引用

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

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


结束

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

已有 2 条评论

  1. 马老师 马老师

    难以置信,丁丁居然更新了

    1. 这叫诈尸型更新(笑

添加新评论

* 人工审核评论,通过后即可正常显示。《隐私政策》