vant/docs/markdown/quickstart.en-US.md

Quickstart

Starter kit

We recomment to use Vue Cli 3 to create a project.

# Install Vue Cli
npm install -g @vue/cli

# Create a project
vue create hello-world

After the creation is complete, you can open the GUI by command.

# Open GUI
vue ui

In the GUI, click on 'Dependencies' -> Install Dependencies and add vant to the dependencies.

Install

NPM

npm i vant -S

YARN

yarn add vant

CDN

<!-- import style -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css" />

<!-- import script -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>

Usage

1. Use babel-plugin-import (Recommended)

# Install babel-plugin-import
npm i babel-plugin-import -D

// set babel config in .babelrc or babel-loader
// Note: Don't set libraryDirectory if you are using webpack 1.
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// For users who use babel7, that can be configured in babel.config.js
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

Then you can import components from vant, equivalent to import manually below.

import { Button } from 'vant';

If you are using TypeScript，please use ts-import-plugin instead

2. Manually import

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

3. Import all components

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

If you configured babel-plugin-import, you won't be allowed to import all components.

Rem units

Vant use px as size units by default，you can use tools such as postcss-pxtorem to transform units to rem.

• postcss-pxtorem
• lib-flexible

postcss config example:

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    }
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}