vue-vant开发移动端---1

1.使用vue/cli创建项目

vue create mobie

2.项目创建完成后引入Vant

npm install vant -S

3.使用vant推荐方法---使用babel-plugin-import

npm i babel-plugin-import -D

3.配置babel.config.js。在其中插入配置组件。

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

完成后如图所示

4.在main.js中按需引入。

//比如要使用如下组件Row, Col, Button, Form, Field, Popup, Picker, Dialog
//如果无需用到则无需引入
import { Row, Col, Button, Form, Field, Popup, Picker, Dialog } from 'vant'

Vue.use(Row).use(Col).use(Button).use(Form).use(Field).use(Popup).use(Picker).use(Dialog)

至此，已经可以实现最基本的应用

<template>
  <div id="app">
    <div class="menuContainer">
      <div>功能列表</div>
      <van-row>
        <van-col span="6">
          <van-button type="primary" @click="goto(1)">功能1</van-button>
        </van-col>

        <van-col span="6">
          <van-button type="info" @click="goto(2)">功能2</van-button>
        </van-col>

        <van-col span="6">
          <van-button type="primary" @click="goto(3)">功能3</van-button>
        </van-col>

        <van-col span="6">
          <van-button type="info" @click="goto(4)">功能4</van-button>
        </van-col>
      </van-row>
    </div>

    <router-view></router-view>
  </div>
</template>