VUE-Cli3引入Vant

参考官网：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

1.安装vant

# Vue 3 项目，安装 Vant 3：
cnpm i vant@next -S

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

注：这里由于用了国内TaboBao的镜像，所以使用cnpm

2.配置vant

1）babel.config.js

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

2）main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { Button } from 'vant';


createApp(App).use(store).use(router).use(Button).mount('#app')

3）Home.vue（使用）

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
  <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>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

 

3.效果

 

 

 

感谢：https://blog.csdn.net/weixin_46211267/article/details/111246113