首页 > 编程知识 正文

vant教程,uniapp引入vant

时间:2023-05-05 12:53:01 阅读:163876 作者:1170

Vant是一个轻量级、可靠的移动端Vue组件库,安装使用可以参考官方文档进行,但发现文档不够多,所以我自己记录在这里

vue使用Vant主要有四种方式,第四种是通过CDN导入,这里不做介绍,主要有以下三种方式。

1 )根据需要自动部署组件(灵活、小巧、官方推荐、需要安装插件) )。

2 )根据需要手动部署组件(在不安装插件的情况下使用) )。

3、全局导入所有组件(这会增加代码包的体积,官方不建议使用) )。

3358www.Sina.com/在使用之前,可首先使用###通过npm或yarn

使用npm安装npm i vant -S#使用yarn安装yarn add vant 1,并根据需要自动部署组件(需要灵活、小型、官方推荐和插件安装)此方法使用babel-plun 首先安装插件

babel-plugin-import插件npm i babel-plugin-import -D安装完成后,必须使用以下两种方法进行配置:

”vue 3.0及更高版本使用babel7,可以在安装文件中配置以下内容:

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

module.export={ ' plugins ' : [ ' import ',{ 'libraryName': 'vant ',' libraryDirectory': 'es ',

//供单个组件使用的()试用较少的类型) importbuttonfrom ' vant/lib/button; import 'vant/lib/button/style '; components: { //注册[Button.name]: Button}//是van-button type=' primary ' button/van-button /等页面您不再需要单独浏览from'vant'vue.use(Button )babel.config.js,也不再需要安装插件。 实施方法如下。

importbuttonfrom ' vant/lib/button '; import 'vant/lib/button/style '; 3 )全局导入所有组件(这将增加代码包的体积,官方不建议使用)。此处需要.babelrc。 也就是说,如果配置了按需部署,则不允许直接导入所有组件,因此,如果配置了按需部署,则应首先执行以下操作:

1 )评论和删除之前的按需导入方式。

2 )注释或删除以前设置为按需部署的插件,是在. babelrc或babel.config.js文件中写入的代码。

3、重新开始项目。

4 )在2,手动按需引入组件(不安装插件情况使用)中,重新引入如下:

//所有组件main.js文件import Vant from 'vant '; import 'vant/lib/index.css '; VUE.USE(vant ); 今后开心地使用吧~~~

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。