vant的安装及其使用

最新推荐文章于 2024-08-24 15:30:52 发布

Adasunshine

最新推荐文章于 2024-08-24 15:30:52 发布

阅读量711

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/FormAda/article/details/111599797

版权

1.安装

在vue项目中使用命令：npm i vant -S 安装

2.引入组件

使用命令：npm i babel-plugin-import -D

将.babelrc 中配置改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

用import {Button} from 'vant'来导入

3.例子

<template>
  <div>
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

<script>
  import {Button} from 'vant'
  export default {
    name: 'index',
    //注册组件
    components:{
      [Button.name]: Button
    }
  }
</script>

<style scoped>

</style>

可以参考文档：https://www.w3cschool.cn/vantlesson/vantlesson-5vrq35uz.html

vant图标库：https://vant-contrib.gitee.io/vant/#/zh-CN/icon