vue+vant2 babel-plugin-import插件按需引入组件 + postcss-px-to-viewport屏幕适配，详细步骤（第一步）

1.在vue2项目中通过npm的下载安装vant2

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

#安装vant2
npm i vant@latest-v2 -s//普通npm
cnpm i vant@latest-v2 -S//淘宝镜像

当看package.json,中有了红框的内容代表安装成功

 2.安装babel-plugin-import插件按需引入组件

npm i babel-plugin-import -d
cnpm i babel-plugin-import -D//淘宝镜像

• 安装成功后,在babel.config.js文件中写入以下代码进行配置

plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

• 在src下新建config文件夹，新建vant.config.js文件，在此文件里按需引用组件

• 在main.js文件中引入vant.config.js文件,之后就可以在页面里直接使用组件

 

 在写移动端的时候，一直为了适配烦恼。postcss-px-to-viewport是一个很完美的插件，通过将px转化为vw、vh。主要适用于移动端。

3.安装插件 postcss-px-to-viewport -屏幕适配

1.安装插件

npm install postcss-px-to-viewport --save-dev //安装插件
yarn add -D postcss-px-to-viewport

2.新建文件postcss.config.js,内容如下：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, //视窗的宽度,对应设计稿的宽度
      viewportHeigth: 667, //视窗的高度
      unitPrecision: 5, //指定'px'转换为视窗单位值的小数位数
      viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
      selectorBlackList: [], //指定不需要转换的类
      minPixelValue: 1,  //最小转换值
      mediaQuery: false,//允许在媒体查询中转换为‘px’,使用媒体查询，再对一些东西进行配置
      exclude: [/TabBar/]  //不需要转化的组件文件名正则，必须是正则表达式
    }
  }
};

配置结束后， 要重启一下项目，然后在写项目的时候，就可以放心大胆的使用px等单位了。在页面上会自动变成vw和vh去适配不同的屏幕。