vue2 + vant 搭建框架并成功引入vant移动端组件（一）

搭建vue框架
1、找到创建vue 的文件夹路径

2、选择手工配置选项

3、详细配置


4、vue2搭建成功

5、安装vant依赖
在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

6、引入组件
方式一. 自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

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

7、main.js全局引用样式

import 'vant/lib/button/style';

8、测试

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <Button>vant按钮</Button>
    <button>普通按钮</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { Button } from "vant";
export default {
  name: "Home",
  components: {
    Button,
  },
};
</script>

9、测试成功