vue中使用Vant

Posted Shiryan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中使用Vant相关的知识,希望对你有一定的参考价值。

Vant官网
环境:vue/cli 4.5.11

1、安装

在package.json中查看Vue的版本,下载对应的版本
Vue2的项目:npm i vant -S
Vue3的项目:npm i vant@next -S

2、使用

2.1、首先在main.js中导入css和vant
import \'vant/lib/index.css\'

2.2、引入组件

法一:自动按需引入组件(推荐)
1.安装插件
npm i babel-plugin-import -D
2.配置babel.config.js(webpack1在babelrc添加配置,无需设置libraryDirectory)

module.exports = {
  plugins: [
    [\'import\', {
      libraryName: \'vant\',
      libraryDirectory: \'es\',
      style: true
    }, \'vant\']
  ]
};

3.在的vue组件中使用vant的组件,注意组件注册的方式

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

import { Button } from \'vant\'

components: {
   [Button.name]: Button
}

法二:手动按需引入组件
1.在main.js中导入

import { Button } from \'vant\'
Vue.use(Button)

2、在vue组件中使用不需要再次导入组件,直接用

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

法三:导入所有组件
1.在main.js中导入

import Vant from \'vant\';
Vue.use(Vant);

2.在vue组件中使用不需要再次导入组件,直接用

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

注意:如已经用法一在babel.config.js中设置了自动按需引入,则不能在main.js中如法三再次导入所有组件,否则会报错Uncaught ReferenceError: Vant is not defined

以上是关于vue中使用Vant的主要内容,如果未能解决你的问题,请参考以下文章

在Vue中引入vant报错(解决办法)

vue中使用Vant

vant组件库 vue及小程序

vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem

vue3、vant 中 ImagePreview 图片预览

在vue里面使用 vant ui组件库