偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的。想着以后的项目中可能会运用到,特此记录下,方便之后使用。

  现在很多的组件库为了减小代码包体积,都支持按需加载了。Vant作为一款优秀的移动端vue组件库,自然也是支持的。由于当下手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑安卓/IOS的各种尺寸设备上的兼容,针对移动端设备的页面,设计与前端实现怎样做才能更好地适配不同屏幕宽度的移动设备?因而,在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放是很有必要的。

  废话不多说,进入正题吧:

  1、假设你已经全局安装了vue脚手架(npm install -g vue-cli)

  2、创建基于webpack模版的新项目:

   vue init webpack vue-demo(其中,vue-demo为项目名)

  3、打开项目,这里以vue-demot为例

   cd vue-demo

  4、安装lib-flexible(它的作用是检测页面是否已有meta[name="viewport"],如果有,将根据已有的meta标签来设置缩放比例,否则会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size)。

   npm i lib-flexible --save

  5、在main.js中引入lib-flexible

   import 'lib-flexible/flexible'

  6、安装px2rem-loader(用于将px转换为rem的工具)

   npm install px2rem-loader

  7、配置px2rem-loader

// 在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5 // 这里设置html根字体,通常设置为设计稿宽度的 1/10。vant-UI的官方根字体大小是37.5
}
}

  8、同时,在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
。。。。
}

  9、安装Vant组件库

   npm i vant -S

  

  10、安装按需引入插件babel-plugin-import

   # 安装插件 npm i babel-plugin-import -D

  11、在babelrc中配置: 

"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
],

  

  接下来就可以npm run dev重启项目愉快地玩耍了。

  在main.js中按需加载你需要的组件: 

import {
popup,
Button
} from 'vant';

  使用组件:

Vue.use(popup)
.use(Button);

  页面中就可以这样使用了。

  <van-button type="primary" @click="showPopup">
展示弹出层
</van-button> <van-popup
v-model="show"
round
position="bottom"
:style="{ height: '20%' }"
/>

vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem的更多相关文章

  1. 自动按需引入组件用不了(Vant)

    按照官网的自动按需引入之后,这样写是报错的,直接在vue页面中这样引用也是报错的. 正确的使用方法是这样的

  2. 在.vue文件中让html代码自动补全的方法(支持vscode)

    在.vue文件中让html代码自动补全的方法(支持vscode) https://blog.csdn.net/qq_36529459/article/details/79196763 "fi ...

  3. Vue脚手架中默认的margin怎么清除

    问题情景:开发中发现我的项目四周有白边,但是并没有设置样式 问题原因:vue脚手架中静态文件夹public中的index.html造成的 解决方案:找到vue脚手架中index.html页面,设置ma ...

  4. 在vue脚手架中使用npm的方式使用swiper

    打开项目的根目录,然后打开命令窗口,输入 npm install swiper@4.4.1 @后为指定版本号,也可以不写 在main.js 中,引入 import Swiper from 'swipe ...

  5. vue px转换为rem

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...

  6. vue脚手架中使用axios

    虽然之前用过n次,但大多都是直接在页面中引入axios.js的.今天想换种方式使用,一时间竟不知道怎么配置了.特此记录下. 1.npm 安装axios,文件根目录下安装,指令如下:  npm inst ...

  7. Vue项目中自动将px转换为rem

    一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...

  8. 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

  9. vue脚手架中动态引用图片的办法

    需要先导入: import logo_st_ga from '../assets/big_st_ga.png'; import logo_st_sp from '../assets/big_st_sp ...

随机推荐

  1. 阶段一:AsyncTask的三个属性值和四个步骤

    “阶段一”是指我第一次系统地学习Android开发.这主要是对我的学习过程作个记录. 最近学到用AsyncTask来处理有关网络的操作.虽然代码看上去不是很复杂,但仍有很多地方有疑惑.所以研读了一下A ...

  2. android开发 兵器

    spring for android andriod anotatons 按android原生的方式写代码,会导致冗余,代码丑陋,开发效率低下. 最近对项目代码进行一些梳理和改进.

  3. SQL2000的三种“故障还原模型”

    一.SQL2000的三种“故障还原模型” 在数据库属性的“选项”页,“故障还原模型”栏,共有三项选择:简单.完全.大容量日志记录.它们的根本差别在于SQL2000对数据库日志的维护方式不同.下面逐个讲 ...

  4. mongodb学习(1) 第一次开启 mongdb

    1.启动mongdb 可以设置为开机启动 mongod -dbpath=/data/mongodb --fork --port 27017 --logpath=/usr/local/mongodb/l ...

  5. Django是Python下的一款网络服务器框架

    被解放的姜戈01 初试天涯   Django是Python下的一款网络服务器框架.Python下有许多款不同的框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django ...

  6. html中的空白字符问题

    1.当我们想使用百分比来进行两个盒子的并排 代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. unity做游戏常用功能实现(一)多方向同时输入也能让物体正常移动

    -------小基原创,转载请给我一个面子 网上有很多讲输入控制如何移动,但是多数都是讲单一按下,对于同时按下2个或2个以上按键并没有说明怎么解决,这里小基研究了一下方便大家 (如果你直接写input ...

  8. iview render input每输入一个字符就会自动跳出焦点

    假如你绑定的table的数据是tableData,input数据改变的时候你把整行的数据替换掉,就不会造成table重新渲染,导致input失焦了 h('InputNumber', { props: ...

  9. C 二叉查找树的基本操作

    最近研究一下二叉树排序问题,找到的资料还真是五花八门,说得也是千奇百怪. 分析一下原因,还是因为数的特性,造成结果的不唯一性造成的大家看了很多,似乎都有理,好像明白了,一综合又糊涂了的结果. 我这里给 ...

  10. Hibernate Generic DAO的介绍安装和使用

    java 的包挺多,比c#多 . jar包一个名,解压缩出来又出来又叫另一个名 .搜索起来,内容都分散的很 http://mvnrepository.com  maven库搜索 com.googlec ...