次文章直供自己学习记录,有语句不同之处见谅!!!
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 :row="3">
属性:title 是否相识标题占位图 值为true,或者false
row 段落占位符的行数 值为数值