偶然间看到一款不错的移动端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:75 //这里设置html根字体，vant-UI的官方根字体大小是37.5

}

}

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

functiongenerateLoaders (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);

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

展示弹出层

v-model="show"round

position="bottom":style="{ height: ‘20%‘ }"

/>

原文：https://www.cnblogs.com/jf-67/p/11382092.html