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

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

最新文章

热门文章