vant + vue 搭建项目

1、安装vue-cli3脚手架

npm install -g @vue/cli

2、通过vue-cli3创建项目

vue create my-project

3、安装vant

通过 npm 安装

npm i vant -S

通过 yarn 安装

yarn add vant

4、引入组件

安装插件

npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

引入要用的组件

5、Rem 适配

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

lib-flexible 用于设置 rem 基准值

下载

npm install  px2rem-loader --save

npm install amfe-flexible --save

main.js引入：

import 'amfe-flexible/index.js';

根目录创建文件

文件 postcss.config.js 参考内容

// 最新写法
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
      ],
    },
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"],
    },
  },
};