Vant前端框架

Posted 2023-04-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vant前端框架相关的知识，希望对你有一定的参考价值。

参考技术A

Vant 轻量、可靠的移动端 Vue 组件库

Vant 是一个轻量、 可靠的移动端组件库 ，于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

文档：V2开发手册： https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

特性：

通过 npm 安装 .在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

通过 CDN 安装 .使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 vant 访问到所有组件。

通过 脚手架安装 .在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Vant。

Vue脚手架（创建、了解结构、运行流程）,不清楚vue怎么创建请点击

打开 Dos命令窗口 ,使用下面命令创建Vue

添加安装Vant支持

项目创建完毕后,并不直接支持vant,我们需要将Vant的内容添加安装到当前Vue项目

添加引用

启动项目的命令

Vant 支持多种组件注册方式，请根据实际业务需要进行选择。

全局注册后，你可以在 app 下的任意子组件中使用注册的 Vant 组件。

局部注册后，你可以在当前组件中使用注册的 Vant 组件。

Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 ref 来注册组件引用信息，引用信息将会注册在父组件的 $refs 对象上。注册完成后，我们可以通过 this.$refs.xxx 访问到对应的组件实例，并调用上面的实例方法。

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。

postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。

表单组件

使用表单组件实现登录页面,是Vant直接提供的组件

向vue文件中复制文档中提供的代码

注意复制的位置,我们以AboutView.vue为例

然后直接访问about页面即可

area省市区选择

我们在手机app上经常需要选择省市区

Vant直接提供了这个组件

我们创建AreaView.vue文件

别忘了要设置路由才能访问这个页面

router文件夹下的index.js文件中添加路由代码

然后可以通过输入路径

localhost:8080/area访问这个页面

但是我们现在只能访问我们数组中定义的少数省市区

怎么才能想文档中显示所有省市区呢

需要引用官方提供的一个地址列表

这样就安装了所有省市区的数据到当前的项目

我们只需要修改js代码,让arealist引用这个数据内容即可

商品列表页

我们在开发酷鲨商城的过程中

移动端需要很多页面,商品列表页面是比较常见的页面之一

我们以商品列表页为例

带领大家开发一个页面

创建页面和路由配置

router/index.js添加路由信息

创建ListView.vue

添加事件调用的参考代码

全站开发好用vue库API框架等好用网站合集

以上是关于Vant前端框架的主要内容，如果未能解决你的问题，请参考以下文章

前端技术概要每天看一遍

Vue常用前端组件库留存备用

全站开发好用vue库API框架等好用网站合集

vue3+vite+vant搭建项目

从 ElementUI 源码的构建流程来看前端 UI 库设计

Vant前端框架

全站开发好用vue库API框架 等好用网站合集

1.Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

2.Vant 有赞前端团队开源的基于vue的移动端组件库

3.Mint UI 基于vue的移动端框架

4.Bootstrap 最受欢迎的 HTML、CSS 和 JavaScript 框架

5.Vuex 一个专为 Vue.js 应用程序开发的状态管理模式。

6.Sass是一种样式表语言，已编译为CSS。

7.echarts 一个基于 JavaScript 的开源可视化图表库

8.CanvasRenderingContext2D接口，为<canvas>提供2D渲染上下文用于绘制形状，文本，图像和其他对象

9.Three.js是基于原生WebGL封装运行的三维引擎，开发Web3D应用

10.W3Cschool 一个专业的编程入门学习及技术文档查询应用

11.菜鸟教程 提供了编程的基础技术教程。

12.阿里巴巴矢量图标库

13.easyicon icon图标下载

14.web安全色

15.css手册

16.CSS3过渡动画模板、CSS3 Transition动画模板

17.贝塞尔曲线控制板

18.Animate.css中文网

19.在线代码压缩工具

20.反应测试

21.站长工具

22.站长素材网页模板

23.英文颜色

24.Bootstrap4文档(部分类不同)

25.QQ界面发展史

26.渐变在线生成

全站开发好用vue库API框架等好用网站合集

11.菜鸟教程提供了编程的基础技术教程。