文档章节

vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem

o
 osc_wws45aot
发布于 2019/08/20 11:55
字数 647
阅读 10
收藏 0

  偶然间看到一款不错的移动端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%' }"
    />

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

如何在Ruby中生成随机字符串 - How to generate a random string in Ruby

问题: I'm currently generating an 8-character pseudo-random uppercase string for "A" .. "Z": 我目前正在为“ A” ..“ Z”生成一个8个字符的伪随机大写字符串: value = ""; 8.times{......

法国红酒甜
58分钟前
20
0
Python中的mkdir -p功能[重复] - mkdir -p functionality in Python [duplicate]

问题: This question already has an answer here: 这个问题在这里已有答案: How can I safely create a nested directory? 如何安全地创建嵌套目录? 25 answers 25个答案 Is there a way...

技术盛宴
今天
15
0
原价500元的认证证书,限时免费考取!

本文作者:y****n 百度云智学院致力于为百度ABC战略(人工智能、大数据、云计算)提供人才生态体系建设,包括基于百度ABC、IoT的课程体系,整合百度优势技术能力的深度学习技术、Apollo无人车...

百度开发者中心
昨天
17
0
在virtualenv中使用Python 3 - Using Python 3 in virtualenv

问题: Using virtualenv , I run my projects with the default version of Python (2.7). 使用virtualenv ,我使用默认版本的Python(2.7)运行项目。 On one project, I need to use Pyth......

富含淀粉
今天
16
0
Python的__init__和self是做什么的? - What __init__ and self do on Python?

问题: I'm learning the Python programming language and I've came across something I don't fully understand. 我正在学习Python编程语言,遇到了一些我不太了解的东西。 In a method ......

javail
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部