摘要

由于需要用到弹出层但是懒得造轮子所以使用vant

介绍

使用的node包管理器为yarn
vue-cli版本4
rem计算方式为index.html的js脚本计算

安装vant

yarn add vant

配置

安装babel-plugin-import实现按需加载

yarn add babel-plugin-import

配置babel
.babelrc 与package.json同级 如果没有就创建一个

{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}

安装postcss-pxtorem 这个是将px转为rem

yarn add postcss-pxtorem

在package.json配置 这个“postcss”默认配置下是存在的 直接替换掉就可以

 "postcss": {
"plugins": {
"autoprefixer": {
"browsers": [
"Android >= 4.0",
"iOS >= 7"
]
},
"postcss-pxtorem": {
"rootValue": 100, //结果为:设计稿元素尺寸/100,比如元素宽750px,最终页面会换算成 7.5rem,可以理解为1rem等于多少的px
"propList": [
"*"
]
}
}
},

到此位置配置就完成了
然后就可以使用官方的引入方式了

vue-cli引用vant使用rem自适应的更多相关文章

  1. vue项目使用Vant框架Rem适配(postcss-pxtorem、lib-flexible )的安装使用

    1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引 ...

  2. VS Code引用 vue/cli

    npm i @vue/cli -g    引用cli脚手架 3.0版本 下载好后 找个空文件夹  vue create myvue 创建vue项目   myvue是自己项目名称 Your connec ...

  3. vue : rem自适应的应用

    我们知道,rem是一个css单位,指的是HTML根节点的字体大小. MDN:css单位 而我们在用rem布局的时候必然会遇到一个问题:我们需要根据用户的屏幕大小去计算rem. 以下是代码. (在VUE ...

  4. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  5. vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适

    安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hj ...

  6. Vue技术点整理-Vue CLI

    Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...

  7. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  8. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  9. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

随机推荐

  1. 12-Factor与云原生

    12-Factor与云原生 云原生应用 今天先到这儿,希望对技术领导力, 企业管理,系统架构设计与评估,团队管理, 项目管理, 产品管理,团队建设 有参考作用 , 您可能感兴趣的文章: 精益IT组织与 ...

  2. JS基础语法---函数作为返回值使用

    结论:函数是可以作为返回值使用的 function f1() { console.log("f1函数调用了"); return function() { console.log(& ...

  3. Android 开发凉了吗!

    昨天我拿了本<安卓开发大全>的书,把它放进了冰箱,你猜怎么样? 它凉了. 记得2013年的时候,安卓崛起,一夜之间遍地谈论安卓这个奇怪的机器人. 安卓受宠的原因,主要围绕着: 1 应用商城 ...

  4. windows客户端访问FTP服务器

    客户端访问FTP服务器步骤: 首先双击此电脑,在弹出的窗口输入如下信息 刚安装完的FTP服务器只有一个pub目录,因为这里是使用匿名用户登录的 FTP服务器默认的匿名目录在/var/ftp/pub/下 ...

  5. shiro实战(1)--web

    目录结构:  数据库结构: 一·web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...

  6. C# -- 模拟扑克牌发牌

    C# -- 模拟扑克牌发牌 1.  User 类: 玩家 public class User { private List<PaperCard> listCard = new List&l ...

  7. js-04-函数学习

    一.什么为函数? 函数是用来执行某些特定功能的代码,为了减少代码的重复使用,将函数作为代码使用,在需要时随时调用使用. 二.函数的声明(函数名严格区分大小写) 1.function命令 functio ...

  8. k8s ingress 转发服务,内容显示不全问题

    0x00 事件 部署了 ingress ,并声明了两个路由 /eureka 和 /tomcat,/eureka 转发到了 eureka server 的服务端口,/tomcat 转发到了 tomcat ...

  9. Git仓库分支管理

    #前提条件:#一.使用命令“cd /d/BranchMgr”进入到需要进行分支管理的仓库的目录,“/d/BranchMgr”是仓库路径.如下图: ”Administrator@DESKTOP-VL6G ...

  10. LinuxPXE+Kickstrart无人值守安装服务

    要求:关闭VMware虚拟网络编辑器中自身的DHCP服务 主机名称 操作系统 IP地址 NoneOS Centos7 192.168.72.250 Custormer 无   1.挂在本地镜像源本配置 ...