安装

官方文档: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

安装的方式有两种:

  1. 一个是基于官方给的案例, 作为模板下载下来后开发
  2. 另一个是从 vue 的项目开始着手

1. 基于官方的模板

官方链接: https://vant-contrib.gitee.io/vant/#/zh-CN/home#guan-fang-sheng-tai

这里给出了很多模板:

image-20231130222750814

都可以使用. 例如基于 Vue3 + TypeScript, 就可以在这里找到:

image-20231130222907646

然后下载下来即可使用.

2. 手动安装

基本步骤:

  1. 创建 vue3 项目.
  2. 安装必要依赖, 如 sass 等.
  3. 安装 vant.
  4. 安装自动加载需要的包: @vant/auto-import-resolver 和 unplugin-vue-components.
  5. 修改 vite.config.ts 文件.
  6. 直接使用 vant 组件进行开发.
npm create vue@latest # 创建 vue3 项目, 向导会提示使用什么项目名称, 是否使用 TS, 路由, pinia 等.
npm i # 进入项目后先安装包
npm i sass -D # 再安装 sass 工具

安装 vant

npm i vant # 安装 vant
npm i @vant/auto-import-resolver unplugin-vue-components -D # 安装自动加载的包

修改 vite.config.ts 文件

...
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
...

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  ...
})

然后就可以直接开发了.

建议使用手动安装, 基于 TS 的类型检查更方便一些, 使用对应模板, 需要使用 yarn type-check 的时候会不方便.

3. 组件的使用

按照方法 2 的步骤安装后, 直接加载使用组件即可. 不需要使用 import 导入再使用.

4. 全局加载

  1. 导入组件
  2. 引入样式 'vant/lib/index.css'
  3. app.use(...) 注册组件
Last Updated:
Contributors: jk