vue移动端vantUIhttps://youzan.github.io/vant/?source=vuejsorg#/

youzan.github.io/vant/?sourc…

1 vue ui配置项目

2 (vue基本配置)npm run server

3 安装vant:

cnpm i vant -S

4 引入vant,推荐按需导入

cnpm i babel-plugin-import -D

5 配置babel.config.js

在presets后面加入plugins相关配置

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

注意:配置文件修改了一定要重启

在src中创建plugins文件夹,在里面创建vant.js文件,在vant.js文件中按需导入

import Vue from 'vue'
import {Button} from 'vant'
Vue.use(Button)

7 在main.js中导入vant.js文件,注意(js文件不需要导出,可直接导入)

// 导入vant.js
import './plugins/vant.js'

8 使用vant组件在app.vue文件中使用button组件,快捷键vanb

<template>
  <div id='app'>
    <van-button type="warning">按钮</van-button>  
  </div>
</template>