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

Posted 2022-08-07 jf-67

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

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%‘ "
    />