次文章直供自己學習記錄，有語句不同之處見諒！！！

vant 的使用需要依賴於 Vue cli

推薦使用 Vue 官方提供的腳手架 Vue Cli 3 創建項目

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

# 創建一個項目
vue create hello-world

# 創建完成後，可以通過命令打開圖形化界面，如下圖所示
vue ui

在圖形化界面中，點擊依賴 -> 安裝依賴，然後將 vant 添加到依賴中即可。

vant的引入

安裝：npm i vant -S

引入組件：

方式1.自動按需要引入組件

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

babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

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

// 在.babelrc 中添加配置
// 注意：webpack 1 無需設置 libraryDirectory 

{
 "plugins": [
 ["import", {
 "libraryName": "vant",
 "libraryDirectory": "es",
 "style": true
 }]
 ]
}

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

// 接著你可以在代碼中直接引入 Vant 組件
// 插件會自動將代碼轉化為方式二中的按需引入形式
import { Button } from 'vant';

如果你在使用 TypeScript，可以使用 ts-import-plugin 實現按需引入

方式二. 手動按需引入組件

在不使用插件的情況下，可以手動引入需要的組件

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

方式三. 導入所有組件

Vant 支持一次性導入所有組件，引入所有組件會增加代碼包體積，因此不推薦這種做法

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

Vue.use(Vant);

注意：配置 babel-plugin-import 插件後，將不允許以這種方式導入組件

推薦：開發是導入所有組件，開發完畢後再配置按需引入。

Skeleton 骨架屏

引入

import Vue from 'vue';
import { Skeleton } from 'vant';

Vue.use(Skeleton);

<van-skeleton>

屬性：title 是否相識標題佔位圖 值為true，或者false

row 段落佔位符的行數 值為數值

閱讀更多 努力的韭菜 的文章

關鍵字: 直供 不同之處 見諒