搭建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、测试成功