vue使用Vant移动端组件库

ゝ一世哀愁。 2023-02-13 05:45 14阅读 0赞

*  Vant是一个轻量、可靠的移动端 Vue 组件库
 *  进入项目目录，安装Vant

> npm i vant -S

*  在`main.js`引入引入`vant`，这里引入所有组件，官方推荐按需加载所需组件

> import Vant from ‘vant’  
> import ‘vant/lib/index.css’  
> Vue.use(Vant)

根据官网的用法，进行使用https://youzan.github.io/vant/\#/zh-CN/home

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70 1]  
效果还是非常的不错的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527171150451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200527171222236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue使用Vant移动端组件库

Vant是一个轻量、可靠的移动端 Vue 组件库进入项目目录，安装Vant > npm i vant -S 在`main.js`引入引入`vant`，这

ゝ一世哀愁。/ 2023年02月13日 05:45/ 0 赞/ 15 阅读

相关 vue移动端弹框组件

这里说一下 `vue-layer-mobile`插件的使用一、npm 安装 // 当前最新版本 1.2.0 npm install vue-laye

心已赠人/ 2023年02月10日 12:26/ 0 赞/ 62 阅读

相关 Vue移动端组件库Vant的快速上手

1. 初次创建项目使用此方法 > Vue 官方提供的脚手架 [Vue Cli][] 创建项目安装 npm install -g @vue/cli

曾经终败给现在/ 2023年02月10日 05:08/ 0 赞/ 164 阅读

相关 Vue+vant移动端处理弹框滑动问题

Vue+vant做移动端需要实现一个弹框向上下滑动的功能遇到了问题记录一下 <div class="popupShowHeight" id="popupShow

ゝ一世哀愁。/ 2022年12月31日 02:19/ 0 赞/ 810 阅读

相关 Vue之Vant移动端组件库使用方法

步骤：全局安装 npm i vant -S 在mian.js中引入 import Vant from 'vant'; import 'va

￡神魔★判官ぃ/ 2022年10月20日 13:44/ 0 赞/ 268 阅读

相关 vue+vant适配移动端REM

第一步：下载 npm i -S amfe-flexible 第二步：在main.js里面引入 import ‘amfe-flexible’ 第三步：下载 npm insta

谁借莪１个温暖的怀抱￠/ 2022年10月20日 01:14/ 0 赞/ 212 阅读

相关 Taroify 移动端组件库 (极力推荐)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZGA5ZOIQA_si

拼搏现实的明天。/ 2022年09月09日 15:52/ 0 赞/ 356 阅读

相关基于 Vue.js 的移动端组件库 Mint UI

Mint UI 详细介绍 Mint-UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。真正意义上

深藏阁楼爱情的钟/ 2022年05月20日 06:21/ 0 赞/ 233 阅读

相关基于 Vue.js 的移动端组件库 cube-ui

cube-ui 详细介绍 cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。功能特性质量可靠由滴滴内部组件库精简提炼

迈不过友情╰/ 2022年05月17日 20:46/ 0 赞/ 228 阅读

相关 vue 使用vant库

1、引入 cnpm i vant -S cnpm i babel-plugin-import -D 2、配置按需加载

雨点打透心脏的1/2处/ 2021年07月25日 00:58/ 0 赞/ 379 阅读