Vue2+Vant 搭建移动端项目由于是Vue2项目，选择Vant组件库也为Vant2。官网地址有Vant使用教程：ht

一、创建项目

win+R打开CMD，进入所需要新建项目的目录，输入命令vue create webapp_wangyiyanxuan，勾选配置选项，生成项目目录。用vscode打开项目目录，新建终端powershell后，输入命令npm run serve，在浏览器中输入地址，Vue页面正常显示即表示创建完成。

二、引入Vant

由于是Vue2项目，选择Vant组件库也为Vant2。官网地址有Vant使用教程：youzan.github.io/vant/v2/#/z… 根据官网教程改动后的文件：

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }]
  ]
}

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { Button } from 'vant'

Vue.use(Button)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在helloworld组件中使用vant：

<template>
  <div class="hello">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>