次文章直供自己學習記錄,有語句不同之處見諒!!!
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 段落佔位符的行數 值為數值
閱讀更多 努力的韭菜 的文章
關鍵字: 直供 TypeScript 見諒