vant组件库的简单使用
1. 组件库的选择
组件库并不是唯一的，常用的组件库还有以下几种：
| pc 端: | element-ui | element-plus iview | element-plus iview | ant-design |
|---|---|---|---|---|
| 移动端： | vant-ui | Mint UI (饿了么) | Cube UI (滴滴) | … |
2. vant组件库
- 主要参考官网：Vant官网
3. vant按需导入（官网推荐）
参考官网：Vant官网
步骤如下：
- 安装vant-ui
yarn add vant@latest-v2
- 安装一个插件
yarn add babel-plugin-import -D
- 在
babel.config.js中配置
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
}
- 把引入组件的步骤抽离到单独的js文件中，比如
utils/vant-ui.js
import { Button, Icon } from 'vant'Vue.use(Button)
Vue.use(Icon)
- 在main.js中进行导入即可
// 导入按需导入的配置文件
import '@/utils/vant-ui'
- 测试：在
app.vue中进行测试
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
4. 导入所有组件（不推荐）
参考官网：vant官网
- 安装vant-ui
yarn add vant@latest-v2
- 在main.js中
import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)
- 即可使用
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
5. 项目中的vw适配
官方说明：浏览器适配
- 安装插件
postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。
yarn add postcss-px-to-viewport@1.1.1 -D
- 项目根目录， 新建postcss的配置文件
postcss.config.js
// postcss.config.js
module.exports = {plugins: {'postcss-px-to-viewport': {viewportWidth: 375,},},
};
说明：viewportWidth:设计稿的视口宽度
- vant-ui中的组件就是按照375的视口宽度设计的，具体场景需要进行修改
toast 轻提示
参考：vant官网
两种使用方式
- 导入调用 ( 组件内 或 非组件中均可 )
import { Toast } from 'vant';
Toast('提示内容');
- 通过this直接调用 ( 组件内 使用)
- 添加到单独 utils/vant-ui.js 文件中 或 main.js 注册绑定到原型
import { Toast } from 'vant';
Vue.use(Toast)
this.$toast('提示内容')