vant组件库的简单使用

发布时间:2024年01月20日

1. 组件库的选择

组件库并不是唯一的,常用的组件库还有以下几种:

pc 端:element-uielement-plus iviewelement-plus iviewant-design
移动端:vant-uiMint UI (饿了么)Cube UI (滴滴)

2. vant组件库

3. vant按需导入(官网推荐)

参考官网:Vant官网

步骤如下:

  1. 安装vant-ui
yarn add vant@latest-v2
  1. 安装一个插件
yarn add babel-plugin-import -D
  1. babel.config.js中配置
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}
  1. 把引入组件的步骤抽离到单独的js文件中,比如 utils/vant-ui.js
import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)
  1. 在main.js中进行导入即可
// 导入按需导入的配置文件
import '@/utils/vant-ui'
  1. 测试:在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官网

  1. 安装vant-ui
yarn add vant@latest-v2
  1. 在main.js中
import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)
  1. 即可使用
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

5. 项目中的vw适配

官方说明:浏览器适配

  1. 安装插件

postcss-px-to-viewport 是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。

yarn add postcss-px-to-viewport@1.1.1 -D
  1. 项目根目录, 新建postcss的配置文件postcss.config.js
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

说明:viewportWidth:设计稿的视口宽度

  • vant-ui中的组件就是按照375的视口宽度设计的,具体场景需要进行修改

toast 轻提示

参考:vant官网

两种使用方式

  1. 导入调用 ( 组件内非组件中均可 )
import { Toast } from 'vant';
Toast('提示内容');
  1. 通过this直接调用 ( 组件内 使用)
  • 添加到单独 utils/vant-ui.js 文件中 或 main.js 注册绑定到原型
import { Toast } from 'vant';
Vue.use(Toast)
this.$toast('提示内容')
文章来源:https://blog.csdn.net/m0_72560900/article/details/135714631
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。