vant_vant引入

vant官网

vant2.0官网

使用vant

参考vant官网–>快速上手–>通过npm安装/引入组件

[1]导入vant 的所有组件

• [1] 安装 vant ：npm i vant -S (通过此命令安装的是最新版本)

• [2] 导入组件

  // [1]引入vant
  import Vant from 'vant'
   // [2]引入vant的样式文件；
  import 'vant/lib/index.css'
  // [3]全局注册 vant 组件
  Vue.use(Vant)
  1
  2
  3
  4
  5
  6

• [3]检验是否安装成功

  • 在app.vue中写一个按钮，查看是否显示且样式正确；

  •    <van-button type="primary">主要按钮</van-button>
    1

[2] 按需引入组件

• [1] 安装 vant ：npm i vant -S (通过此命令安装的是最新版本)

• [2] 导入组件

   // [1] 按需引入组件
   import { Button} from 'vant';
   // [2] 按需引入样式文件
   import 'vant/lib/button/style';
   // [3] 全局注册组件
   Vue.use(Button);
  1
  2
  3
  4
  5
  6

• [3]检验是否安装成功

  • 在app.vue中写一个按钮，查看是否显示且样式正确；

  •    <van-button type="primary">主要按钮</van-button>
    1

• 注：此时组件虽然是按需引入，但是却引入了组件的全部样式！

[3]自动按需引入组件

前提：需要借助babel-plugin-importbabel插件，该插件的作用是在源码编写阶段或者 babel 编译 js 阶段，通过部分引入的写法，使得项目代码或 babel 编译后的代码中只包含使用到的组件的 js、css、less 等。

• [1]安装插件

  npm i babel-plugin-import -D
  1

• [2]在babel配置文件中添加配置

   module.exports = {
     plugins: [
        ['import', {
           libraryName: 'vant',
           libraryDirectory: 'es',
           style: true
        }, 'vant']
   ]
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9

• [3]使用

  // [1] 按需引入组件
   // 这里引入的组件在经过编译后插件会自动将代码转化为方式二中的按需引入形式
    import { Button } from 'vant';
    // [2] 全局注册组件
    Vue.use(Button)
  1
  2
  3
  4
  5

• [4]检验是否安装成功
  • 在app.vue中写一个按钮，查看是否显示且样式正确；

  •    <van-button type="primary">主要按钮</van-button>
    1

使用过程中遇到的问题

[1]error-版本冲突

问题：在下载 vant 时发现报错unable to resolve dependency tree；
原因：我此时使用的vue版本为2.6.14版本，因此如果下载vant3会出现版本冲突。
解决：下载对应版本的vant;

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S
1
2
3
4
5

[2]error:Dialog is not defined

在main.js引入Dialog组件并全局注册

import { Dialog } from 'vant';
Vue.use(Dialog);
1
2

在组件中使用Dialog

Dialog.alert({
  message: '弹窗内容',
}).then(() => {
  // on close
});
1
2
3
4
5

但是却报错 Dialog is not defined

原因是在全局注册时：若是注册的组件是一个方法会将其添加在实力化对象身上 Vue.prototype.$dialog = Dialog

因此在组件中使用时直接即可～

this.$dialog.alert({
 message: '弹窗内容',
}).then(() => {
 // on close
});
1
2
3
4
5

[3]steps左侧图标不显示

复制官网代码，添加类名

因为设置的padding将原来的padding覆盖掉了，而此元素又设置了overflow:hidden;将icon元素给隐藏掉了！

逻辑

[1]radio取消勾选

radio取消勾选