黑马头条移动项目(四)：引入Vant组件库 和 移动端适配

最新推荐文章于 2024-04-24 11:42:12 发布
最新推荐文章于 2024-04-24 11:42:12 发布
阅读量1k 收藏 1
点赞数 2
分类专栏： Vue 文章标签： vue.js 前端 postcss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44808327/article/details/123467884
版权
目标引入Vant组件库并配置1. Vant组件库1.1 目标黑马头条项目 — 基于Vant组件库开发1.2 移动端组件库有赞团队推出的Vant组件库其他移动端组件库vuxmint1.3 引入vant组件库下载vant组件库yarn add vant@2.12.44注意：这里使用的是Vue 2版本, 所以Vant 版本号最高只能是2.12.44, 要不然会报错根据文档指引,配置按需引入Vant 2 组件库：https://vant-contrib.gi
摘要由CSDN通过智能技术生成

目标

  • 引入Vant组件库并配置

1. Vant组件库

1.1 目标

黑马头条项目 — 基于Vant组件库开发

1.2 移动端组件库

有赞团队推出的Vant组件库

其他移动端组件库

  • vux
  • mint

1.3 引入vant组件库

  1. 下载vant组件库
yarn add vant@2.12.44

注意：这里使用的是Vue 2版本, 所以Vant 版本号最高只能是2.12.44, 要不然会报错

  1. 根据文档指引,配置按需引入
    Vant 2 组件库：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/home

如果上面打不开用这个地址试试: https://youzan.github.io/vant/#/zh-CN/home<

了解本专栏 订阅专栏 解锁全文 超级会员免费看
我就是咸鱼
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在 vue2 中使用 vant2 组件库
qq_55685361的博客
04-28 3627
在 vue2 中使用 vant2 组件库
2022-04-20 工作记录--Vue-vue2-vant组件库的使用
weixin_48850734的博客
04-20 979
vue2-vant组件库的使用
前端-移动端基于vant4开发
最新发布
qq_42371932的博客
04-24 936
头部的吸顶效果，可以使用vant4的粘性布局。
vant V2.12 下拉刷新和弹出框的坑
pusscat_xue的博客
03-22 835
先看问题，在下拉刷新中使用弹出框，会导致下拉弹出框的内容可触发下拉刷新，如下图所示 导致这个的原因就是因为弹出框挂载到了下拉刷新的div上，所以才会触发下拉刷新，弹出框最好挂载到body上，在vant的官网中弹出框(Dialog)有一个这样的属性 默认就是在body挂载，但不知道为何没有生效 ,只要在弹出框中设置get-container="body"这个属性就可以避免触发下拉刷新， 更多用法可参考官网:Vant 2 - Mobile UI Components built on Vu..
Vant 4 可制定的移动端组件库
weixin_58091723的博客
08-04 1678
Vant 4 - 轻量、可定制的移动端组件库 (gitee.io)在现有项目中使用 Vant 时，可以通过。
Vant2 源码分析之 vant-sticky
Dreamy_LIN的博客
03-05 1997
vant-sticky 源码分析
epage-vant：基于vant组件库的epage移动端渲染包
02-20
EpageVant基于vant组件库的渲染包|中文介绍文件官网： :演示地址安装npm install epage-vant -S# or yarn add epage-vant设计器及渲染器示例npm方式约会（推荐） import widgets , { Render } from 'epage-vant'...
Vant移动端组件库-其他
06-13
Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。 特性： 1、60+ 高质量组件 2、95% 单元测试覆盖率 3、完善的中英文文档和示例 4、支持按需引入 5、支持主题定制 6...
vant-shop:基于vant ui的移动端商城项目
05-14
基于vant ui的移动端商城项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for ...
xianyu-mobile：宁静的Api Vue Vant移动端适配
02-22
个人全栈项目，大规模接口使用Node.js + Koa2 + MongoDB + Redis，使用了阿里云的短信服务，阿里云OSS。 初步项目地址： : 项目运行 git clone https://github.com/cghbh/xianyu-mobile.git cd xianyu-mobile npm ...
Vant移动端组件库 v2.12.0
12-28
为您提供Vant移动端组件库下载，Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。特性：1、60+ 高质量组件2、95% 单元测试覆盖率3、完善的中英文文档和示例4、支持按需引入5、支持主题定制6、支持国际化7、支持 TS8、支持 SSR建议搭配 webpack，babel 使用 Vant，这样可以使用 webpack 提供的丰富插件和个性化配置。Vant 支持了 babel-
Vue2.x 全家桶+Vant 搭建大型单页面电商项目 (页面齐全, 数据源与项目完整)
01-02
2020年1月2日 11:15:26 ; 基于 vue 2.x 和 vant 2.x实现。使用了最新的Vue全家桶技术栈，以及一些优秀的开源库如better-scroll、 moment.js、twix.js、pubsub-js,后台数据通过Easy-Mock搭建 ; 需要在本地安装 node 和 git。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 vant-ui，所有的请求数据都使用Mock.js进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助
Vant使用方法
EX1332914934的博客
05-01 814
1.安装 // vue3版本 npm i vant //安装最新款 // vue2版本 npm i vant@2.12.47 //指定安装版本 2.引入组件（按需引入） 2.1安装插件 npm install babel - plugin - import -- save - dev npm i babel-plugin-transform-runtime@6.23.0 npm i babel-plugin-transform-vue-jsx@3.7.0 2.2配置插件 在babel.config.j
vue+vant 移动端H5 商城项目_01
Gblfy_Blog
12-18 3879
一、 技术选型 组件 版本 说明 vue ^2.6.11 数据处理框架 vue-router ^3.5.3 动态路由 vant ^2.12.37 移动端UI axios ^0.24.0 前后端交互 amfe-flexible ^2.2.1 Rem 布局适配 postcss-pxtorem ^5.1.1 Rem 布局适配 less ^4.1.2 css编译 less-loader ^5.0.0 css编译 vue/cli ~4.5.0 项目脚手架 vu...
vant4的基础用法
热门推荐
m0_58002043的博客
10-30 2万+
这篇文章会手把手的教你如何用vant开发h5
Vant4在Vue3.3中如何按需导入组件和样式
HaushoLin的博客
01-12 3086
最近我在Vue 3.3的项目中对Vant4做按需导入时，尽管按照Vant4的官方指南进行操作，但样式仍然无法正确加载。经过深入研究和多篇文章的比较，我终于找到了在Vue3中如何正确的按需导入Vant 4组件和样式的方法。由于Vue3.3和Vant4相对较新，相关资料可能还不够完善，因此我认为分享这个经验非常重要。希望这篇文章能帮助到同样遇到此问题的开发者们，并推动相关技术的进步。
vue3+vite+vant4手机端项目实录
xiaowu1127的博客
02-12 7936
vue3+vite+vant4手机端项目
uniapp中怎么引入vant组件库
06-10
1. 在项目的根目录下使用npm安装vant组件库：`npm i vant -S` 2. 在`main.js`中引入vant组件库并注册： ```javascript import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值