vant部署_记录mpvue+vant-weapp的使用（一）：安装配置使用，引入vant-weapp

2020-8-7前来更新-------------------------------------------

放上成品，可以参考参考：

之前用vue用的比较习惯，比较喜欢里面的组件式开发，能少写一些复用的代码，于是尝试一下美团的mpvue来开发小程序。

部署教程官网里面的就可以了。

然后，mpvue只是提供了代码编辑的框架而已，里面的组件之类需要第三方的组件库，我看到基本上用的vant-weapp的比较多，于是也打算尝试一下。want-weap支持小程序和app，这里要注意不要使用vant，要用vant-weapp

"mpvue": "^2.0.0"

"vant-weapp": "^0.5.28"

"vuex": "^3.0.1"

这是我的各个模块的版本。

遇到第一个问题：小程序是使用rpx来适配的，px转rpx的问题

最新版本的mpvue是自带px2rpx的，所以css里面的px可以自动转化成rpx

具体的转化比例修改：

找到这个可以自己修改

var px2rpxLoader = {

loader: 'px2rpx-loader',

options: {

baseDpr: 1,

rpxUnit: 0.5

}

但是有个问题是，npm引入的vant-weapp 是没有编译到的。所以这里需要将want-weapp的内容搬到static里面，

然后找到

var Px2rpx = require('px2rpx');

var px2rpxIns = new Px2rpx({ rpxUnit: 0.5 });

//修改这个

// new CopyWebpackPlugin([

// {

// from: path.resolve(__dirname, '../static'),

// to: path.resolve(config.build.assetsRoot, './static'),

// ignore: ['.*']

// }

// ]),

new CopyWebpackPlugin([

{

from: path.resolve(__dirname, '../static'),

to: path.resolve(config.build.assetsRoot, './static'),

transform(content, path) {

if (path.endsWith('.wxss')) {

return px2rpxIns.generaterpx(content.toString(), 1)

} else {

return content

}

ignore: ['.*']

}

]),

可以看到按钮的样式变成了rpx。

也可以查看编译之后的dis里面的vant-weapp模块的css

本质上是将css里面的px统一替换成rpx而已。

vant部署_记录mpvue+vant-weapp的使用（一）：安装配置使用，引入vant-weapp相关推荐

vant部署_详解VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90% 完善的中英文文档和示 ...
openshift4离线部署_干货！OpenShift离线环境OperatorHub和ImageStream配置实战技巧
OpenShift4.5.x离线环境OperatorHub和ImageStream配置实战技巧 1 . 前言在离线环境使用UPI(UserProvisioned Infrastructure)方式安 ...
404 not found nginx是什么意思_如何在BT面板基于nginx环境安装配置Perfex CRM网站
如何在BT面板基于nginx环境安装配置Perfex CRM网站第一次接触到这个小众CRM,源于一哥们以30块大洋就收买了我,谁让我穷呢? 官网:https://www.perfexcrm.com ...
python playsound安装_ python音频库：Windows下pydub安装配置、过程出现的问题及常用API ...
< python音频库:Windows下pydub安装配置.过程出现的问题及常用API > 背景刚从B站上看过倒放挑战之后也想体验下,心血来潮一个晚上完成了基本的实现.其中倒放与播放部分 ...
python建站部署_记录一下自己的建站过程（四）MongoDB与Pymongo
前言以前我在看关于架设网站的相关帖子时,就觉得为什么他们非得用数据库?我在课堂里学的数据库不就是一个存储和读取数据的外部系统么,理论上,不使用数据库也能架设网站的.然而,各大云计算平台,鸟哥的lin ...
实战本地服务器Confluence 7.13部署一篇就够（从0开始安装配置 Debian11 + Mysql + Java）超详细
前言在公司用了好几年的Confluence (WIKI),不说他有多方便吧,主要是习惯了操作方式.最近被封在家里,就想着趁时间比较充裕就在家里部署一套Confluence,1是为了把自己平时的学习P ...
基于ip地址的客户识别原理_使用 LVS 实现负载均衡原理及安装配置
[141] 负载均衡集群是 load balance 集群的简写,翻译成中文就是负载均衡集群.常用的负载均衡开源软件有nginx.lvs.haproxy,商业的硬件负载均衡设备F5.Netscale. ...
zlib安装_.NET Core 架构设计实战04 - Nginx安装配置
前言大家好,我是程序员阿木! Nginx 是由 Igor Sysoev 于 2004 年首次公开发布一个异步框架的 Web 服务器,也可以用作反向代理,负载平衡器和 HTTP 缓存.Nginx 是 ...
5.7.21mysql数据库_【数据库】mysql5.7.21 winx64安装配置图文分享
本文主要为大家详细介绍了mysql 5.7.21 winx64安装配置方法图文教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 1.将下载好的mysql压缩包解压到安装目录下 ...

vant部署_记录mpvue+vant-weapp的使用（一）：安装配置使用，引入vant-weapp

vant部署_记录mpvue+vant-weapp的使用（一）：安装配置使用，引入vant-weapp相关推荐

最新文章

热门文章