开发环境搭建

脚手架

推荐使用 Vue 官方提供的脚手架 Vue Cli 3 创建项目

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

# 创建一个项目 我想要在D:\WWW下创建siliao项目
vue create siliao
# 之后需要进入siliao目录进行插件组件安装操作
cd siliao

安装

# 通过 npm 安装
npm i vant -S 

引入组件

采用官方推荐按需引入组件(未使用Typescript)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式，本文采用babel7

# 安装插件
npm i babel-plugin-import -D

// 在项目根目录下的 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

Rem适配 

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

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

1、下载lib-flexible

npm i lib-flexible --save

2、引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3、设置meta标签

通过meta标签，设置设备宽度以及缩放比例

# 项目根目录/public/index.html里更改默认meta

# old: <meta name="viewport" content="width=device-width,initial-scale=1.0">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4、安装postcss-pxtorem

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

npm install postcss-pxtorem -D

5、配置postcss-pxtorem

项目根目录下vue.config.js

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
  outputDir: './dist',
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
};