介紹

通過(guò)本章節(jié)你可以了解到 Vant 的安裝方法和基本使用姿勢(shì)。

安裝

通過(guò) npm 安裝

在現(xiàn)有項(xiàng)目中使用 Vant 時(shí)，可以通過(guò) npm 或 yarn 進(jìn)行安裝：

# Vue 3 項(xiàng)目，安裝最新版 Vant：
npm i vant -S

# Vue 2 項(xiàng)目，安裝 Vant 2：
npm i vant@latest-v2 -S

腳手架

推薦使用 Rsbuild 來(lái)創(chuàng)建一個(gè)腳手架項(xiàng)目。

Rsbuild 是基于 Rspack 的構(gòu)建工具，由 Vant 作者開(kāi)發(fā)，具備一流的構(gòu)建速度和開(kāi)發(fā)體驗(yàn)，對(duì) Vant 提供第一優(yōu)先級(jí)支持。

你可以通過(guò)以下命令創(chuàng)建一個(gè) Rsbuild 項(xiàng)目：

npm create rsbuild@latest

請(qǐng)?jiān)L問(wèn) Rsbuild 倉(cāng)庫(kù) 了解更多信息。

通過(guò) CDN 安裝

使用 Vant 最簡(jiǎn)單的方法是直接在 html 文件中引入 CDN 鏈接，之后你可以通過(guò)全局變量 vant 訪問(wèn)到所有組件。

<!-- 引入樣式文件 -->
<link rel="stylesheet"  rel="external nofollow" target="_blank"  />

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js" rel="external nofollow" ></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js" rel="external nofollow" ></script>

<script>
  // 在 #app 標(biāo)簽下渲染一個(gè)按鈕組件
  new Vue({
    el: '#app',
    template: `<van-button>按鈕</van-button>`,
  });

  // 調(diào)用函數(shù)組件，彈出一個(gè) Toast
  vant.Toast('提示');

  // 通過(guò) CDN 引入時(shí)不會(huì)自動(dòng)注冊(cè) Lazyload 組件
  // 可以通過(guò)下面的方式手動(dòng)注冊(cè)
  Vue.use(vant.Lazyload);
</script>

免費(fèi) CDN

你可以通過(guò)以下免費(fèi) CDN 服務(wù)來(lái)使用 Vant:

• jsdelivr
• cdnjs
• unpkg

注意：免費(fèi) CDN 一般用于制作原型或個(gè)人小型項(xiàng)目，不推薦在企業(yè)生產(chǎn)環(huán)境中使用免費(fèi) CDN。

對(duì)于企業(yè)開(kāi)發(fā)者，建議使用以下方式：

• 通過(guò) npm 引入，并通過(guò)構(gòu)建工具進(jìn)行打包
• 下載對(duì)應(yīng)文件，并托管在你自己的服務(wù)器或 CDN 上

通過(guò)腳手架安裝

在新項(xiàng)目中使用 Vant 時(shí)，推薦使用 Vue 官方提供的腳手架 Vue Cli 創(chuàng)建項(xiàng)目并安裝 Vant。

# 安裝 Vue Cli
npm install -g @vue/cli

# 創(chuàng)建一個(gè)項(xiàng)目
vue create hello-world

# 創(chuàng)建完成后，可以通過(guò)命令打開(kāi)圖形化界面，如下圖所示
vue ui

在圖形化界面中，點(diǎn)擊 依賴(lài) -> 安裝依賴(lài)，然后將 vant 添加到依賴(lài)中即可。

示例

示例工程

我們提供了豐富的示例工程，通過(guò)示例工程你可以了解如下內(nèi)容：

• 基于 Vue Cli 和 Vant 搭建應(yīng)用
• 基于 Nuxt 和 Vant 搭建應(yīng)用
• 配置按需引入組件
• 配置基于 Rem 的適配方案
• 配置基于 Viewport 的適配方案
• 配置基于 TypeScript 的工程
• 配置自定義主題色方案

引入組件

方式一. 自動(dòng)按需引入組件 (推薦)

babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過(guò)程中將 import 的寫(xiě)法自動(dòng)轉(zhuǎn)換為按需引入的方式。

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

// 在.babelrc 中添加配置
// 注意：webpack 1 無(wú)需設(shè)置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 對(duì)于使用 babel7 的用戶(hù)，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接著你可以在代碼中直接引入 Vant 組件
// 插件會(huì)自動(dòng)將代碼轉(zhuǎn)化為方式二中的按需引入形式
import { Button } from 'vant';

Tips: 如果你在使用 TypeScript，可以使用 ts-import-plugin 實(shí)現(xiàn)按需引入。

方式二. 手動(dòng)按需引入組件

在不使用插件的情況下，可以手動(dòng)引入需要的組件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

方式三. 導(dǎo)入所有組件

Vant 支持一次性導(dǎo)入所有組件，引入所有組件會(huì)增加代碼包體積，因此不推薦這種做法。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Tips: 配置按需引入后，將不允許直接導(dǎo)入所有組件。

常見(jiàn)問(wèn)題

在 HTML 中無(wú)法正確渲染組件？

在 HTML 中使用 Vant 組件時(shí)，你可能會(huì)碰到部分示例代碼無(wú)法正確渲染的情況，比如下面的用法：

<van-cell-group>
  <van-cell title="單元格" value="內(nèi)容" />
  <van-cell title="單元格" value="內(nèi)容" />
</van-cell-group>

這是因?yàn)?HTML 并不支持自閉合的自定義元素，也就是說(shuō) <van-cell /> 這樣的語(yǔ)法是不被識(shí)別的，使用完整的閉合標(biāo)簽可以避免這個(gè)問(wèn)題：

<van-cell-group>
  <van-cell title="單元格" value="內(nèi)容"></van-cell>
  <van-cell title="單元格" value="內(nèi)容"></van-cell>
</van-cell-group>

在單文件組件、字符串模板和 JSX 中可以使用自閉合的自定義元素，因此不會(huì)出現(xiàn)這個(gè)問(wèn)題。