vant的安装和使用步骤

Posted

tags:

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

参考技术A Vant 是轻量、可靠的移动端 Vue 组件库,是 有赞前端团队开发的产品。

通过vue-cli3创建项目,用vue ui 命令打开图形化界面,点击安装依赖按钮,然后搜索vant,安装。

安装完vant后,引入组件,才能使用。这里我选择自动按需引入组件,这也是官方推荐的一种引入方式。

babel-plugin-import  是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件

npm:   npm i babel-plugin-import -D

yarn:  yarn add babel-plugin-import --dev

然后,在 babel.config.js 中配置

plugins: [

    ['import',

      libraryName: 'vant',

      libraryDirectory: 'es',

      style: true    , 'vant']

  ]

最后,就可以再组件中直接引入,使用vant组件了:

OK,完成!

uniapp写h5页面使用Vant组件开发项目

uniapp项目里使用Vant组件开发项目引入步骤:

点击跳转到Vant官方地址

1、安装Vant:

npm i vant -S --production

会在 node_modules 出现下面的 Vant安装包

会在全局的 package.json 出现 Vant版本号:

2、安装 babel-plugin-import 插件,babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式:

npm i babel-plugin-import -D

注意:如果你的项目在这时报错,有可能是你自己在借鉴别人的步骤安装了有关Vant插件或者配置,请把它们删掉,记住,不要删除上面步骤1安装的

3、在全局的 main.js 里引入vant:

import Vant from 'vant';

4、在全局的 App.vue 里引入Vant的css样式:

@import "vant/lib/index.css";

5、在全局的 main.js 里按需要引入vant组件:

import { Button } from 'vant';
import { DropdownMenu, DropdownItem } from 'vant';
 
Vue.use(Button);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
  

6、在页面中使用Vant组件:


效果:

结束语:本人有在项目里面亲自试过,可以引入成功;如果您引入不成功可以把问题写在评论区,大家一起讨论!

以上是关于vant的安装和使用步骤的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序使用 Vant Weapp 的步骤

微信小程序中使用vant框架,方法步骤清晰,简单适用

uniapp写h5页面使用Vant组件开发项目

uniapp写h5页面使用Vant组件开发项目

微信小程序——引入Vant组件库

如何使用Vue集成其它UI组件?如何阅读UI官网?移动端组件Vant实例教程(熬夜干货)