手机/移动端的UI框架-Vant和NutUI

news2024/11/16 13:37:18

下面推荐2款手机/移动端的UI框架。

其实还有很多的框架，各个大厂都有UI框架。目前，找来找去，只有腾讯的移动端是setup语法写的TDesign，其他大厂，虽然都是VUE3写的，但是都还未改成setup的语法，而且，腾讯的版本也比较新，所以暂时不做案例了。我们使用成熟的UI框架Vant和NutUI来演示。其中京东的NutUI组件，还有小程序组件。

目录

一、Vant

二、NutUI

一、Vant

官网，Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.，多的不说了，可以看官网介绍，下面我们直接创建程序。

1. 我们使用HBuilder X创建一个正常的程序

2.命令安装

npm i vant

安装完成标志

3.这里的mian.js不需要修改，和很多其他组件不一样

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

4.因为用的是vite创建的项目，所以修改vite.config.js

import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {
	VantResolver
} from 'unplugin-vue-components/resolvers'

export default {
	plugins: [
		vue(),
		Components({
			resolvers: [VantResolver()]
		})
	]
}

5.命令安装插件，否则报错

npm i unplugin-vue-components -D
npm i less

成功标志

6.HelloWorld.vue中引用组件的功能

<template>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>
	<van-tabbar v-model="active">
		<van-tabbar-item icon="home-o">标签</van-tabbar-item>
		<van-tabbar-item icon="search">标签</van-tabbar-item>
		<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
		<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
	</van-tabbar>

</template>

<script>
	export default {
		data() {
			return {
				goods: {
					title: "美国伽力果213（约680g/3个）",
					price: 2680,
					express: "免运费",
					remain: 19,
					thumb: [
						"https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
						"https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg",
					],
				},
			};
		},

		methods: {
			formatPrice() {
				return "¥" + (this.goods.price / 100).toFixed(2);
			},

			onClickCart() {
				this.$router.push("cart");
			},

			sorry() {
				Toast("暂无后续逻辑~");
			},
		},
	};
</script>

<style lang="less">
	body {
		font-size: 16px;
		background-color: #f8f8f8;
		-webkit-font-smoothing: antialiased;
	}

	.goods {
		padding-bottom: 50px;

		&-swipe {
			img {
				width: 100%;
				display: block;
			}
		}

		&-title {
			font-size: 16px;
		}

		&-price {
			color: #f44;
		}

		&-express {
			color: #999;
			font-size: 12px;
			padding: 5px 15px;
		}

		&-cell-group {
			margin: 15px 0;
		}

		&-tag {
			margin-left: 5px;
		}
	}
</style>

7.运行效果

PC端

手机端

二、NutUI

官网，NutUI - 移动端组件库，多的不说了，可以看官网介绍，下面我们直接创建程序。

1. 我们使用HBuilder X创建一个正常的程序

2. 使用命令安装

npm i @nutui/nutui

安装完成标志

 

3.main.js中，我们使用全局引入，实际开发中，为了更小的程序包，可以按需引入

import {
	createApp
} from "vue";
import App from "./App.vue";
import NutUI from "@nutui/nutui";
import "@nutui/nutui/dist/style.css";
createApp(App).use(NutUI).mount("#app");

4.因为用的是vite创建的项目，所以修改vite.config.js

import {
	defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import NutUIResolver from '@nutui/nutui/dist/resolver'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		// 开启 unplugin 插件，自动引入 NutUI 组件
		Components({
			resolvers: [NutUIResolver()]
		})
	],
	// 配置全局样式变量
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: '@import "@nutui/nutui/dist/styles/variables.scss";'
			}
		}
	}
})

5.HelloWorld.vue中引用组件的功能

<template>
	<nut-form>
		<nut-form-item label="姓名">
			<nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入姓名" type="text" />
		</nut-form-item>
		<nut-form-item label="年龄">
			<nut-input v-model="basicData.age" class="nut-input-text" placeholder="请输入年龄" type="text" />
		</nut-form-item>
		<nut-form-item label="联系电话">
			<nut-input v-model="basicData.tel" class="nut-input-text" placeholder="请输入联系电话" type="text" />
		</nut-form-item>
		<nut-form-item v-model="basicData.address" label="地址">
			<nut-input class="nut-input-text" placeholder="请输入地址" type="text" />
		</nut-form-item>
		<nut-form-item label="备注">
			<nut-textarea placeholder="请输入备注" type="text" />
		</nut-form-item>
	</nut-form>
	<nut-tabbar bottom safe-area-inset-bottom placeholder>
		<nut-tabbar-item v-for="(item,index) in List" :tab-title="item.title" :icon="item.icon"> </nut-tabbar-item>
	</nut-tabbar>
</template>
<script lang="ts">
	import {
		h,
		ref,
		reactive
	} from 'vue';
	import {
		Home,
		Category,
		Find,
		Cart,
		My
	} from '@nutui/icons-vue';
	export default {
		components: {
			Home,
			Category,
			Find,
			Cart,
			My
		},
		setup() {
			const basicData = reactive({
				name: '',
				age: '',
				tel: '',
				address: ''
			})
			const List = [{
					title: '标签',
					icon: h(Home),
				},
				{
					title: '标签',
					icon: h(Category),
				},
				{
					title: '标签',
					icon: h(Find),

				},
				{
					title: '标签',
					icon: h(Cart),
				},
				{
					title: '标签',
					icon: h(My),
				}
			]
			return {
				List,
				basicData
			};
		},
	}
</script>

6.运行效果

PC端

手机端

 源码地址：

Demo-NutUI: Demo-NutUI

https://gitee.com/602874946/demo-vant-d

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/354955.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

张晨光-JAVA零基础保姆式JDBC技术教程

张晨光-JAVA零基础保姆式JDBC技术教程

JDBC文档 JDBC概述 JDBC概述 Java DataBase Connectivity Java 数据库连接技术 JDBC的作用 通过Java语言操作数据库&#xff0c;操作表中的数据 SUN公司为**了简化、**统一对数据库的操作&#xff0c;定义了一套Java操作数据库的规范&#xff0c;称之为JDBC JDBC的本质 是官方…
阅读更多...
【JavaSE专栏10】Java的顺序结构、选择结构和循环结构

【JavaSE专栏10】Java的顺序结构、选择结构和循环结构

作者主页&#xff1a;Designer 小郑 作者简介&#xff1a;Java全栈软件工程师一枚&#xff0c;来自浙江宁波&#xff0c;负责开发管理公司OA项目&#xff0c;专注软件前后端开发&#xff08;Vue、SpringBoot和微信小程序&#xff09;、系统定制、远程技术指导。CSDN学院、蓝桥云…
阅读更多...
金融错配程度/信贷错配程度/资本错配程度/资本资源错配程度（1998-2021年）

金融错配程度/信贷错配程度/资本错配程度/资本资源错配程度（1998-2021年）

数据来源&#xff1a;根据沪深A股上市公司数据进行测算 时间跨度&#xff1a;1998-2021年 区域范围&#xff1a;沪深A股上市公司 指标说明&#xff1a; 参考邵挺(2010)、周煜皓和张胜勇(2014)的研究&#xff0c;运用金融错配负担水平来衡量信贷错配&#xff08;Fd&#xff…
阅读更多...
Redis-哨兵模式以及集群

Redis-哨兵模式以及集群

在开始这部分内容之前需要先说一下复制功能&#xff0c;因为这是Redis实现主从数据同步的实现方式。复制功能如果存在两台服务器的话&#xff0c;我们可以使用redis的复制功能&#xff0c;让一台服务器去同步另一台服务器的数据。现在我启动了两台redis服务器&#xff0c;一个端…
阅读更多...
【大数据】HADOOP-Yarn集群界面UI指标项详解（建议收藏哦）

【大数据】HADOOP-Yarn集群界面UI指标项详解（建议收藏哦）

目录首页&#xff08;Cluster&#xff09;节点信息Scheduler Metrics&#xff1a;集群调度信息节点信息详解&#xff08;Nodes&#xff09;应用列表信息&#xff08;applications&#xff09;队列详情页&#xff08;Scheduler&#xff09;指标详细说明&#xff08;非常重要&…
阅读更多...
斯坦福：chatGPT可能有了人类心智，相当于9岁儿童！

斯坦福：chatGPT可能有了人类心智，相当于9岁儿童！

chatGPT已经具备了人类独心智&#xff0c;这话不是我说的&#xff0c;是一位来自斯坦福大学计算机科学家说的。很多玩过chatGPT的人都见识过他的”无所不知”&#xff0c;但是&#xff0c;我觉得最让我吃惊的是&#xff0c;他比以前我们用过那些对话机器人最大的差别就是你甚至…
阅读更多...
「数据科学」数据科学家为什么应该学习PostgreSQL？

「数据科学」数据科学家为什么应该学习PostgreSQL？

SQL是成为数据科学家的必要条件吗?答案是肯定的。数据科学已经发展了&#xff0c;虽然许多数据科学家仍然使用CSV文件(值以逗号分隔的文本文件)&#xff0c;但它们不是最好的选择。Python Panda库允许从CSV文件加载数据&#xff0c;但是这些文件有许多约束。例如&#xff0c;它…
阅读更多...
各种常用C/C++集成开发环境的安装与配置

各种常用C/C++集成开发环境的安装与配置

新学期又开始了&#xff0c;帮助又一堆菜鸟安装和配置C/C集成开发环境是一件恼人的工作。 本文引用自作者编写的下述图书; 本文允许以个人学习、教学等目的引用、讲授或转载&#xff0c;但需要注明原作者"海洋饼干叔 叔"&#xff1b;本文不允许以纸质及电子出版为目的…
阅读更多...
【k8s】如何搭建搭建k8s服务器集群（Kubernetes）

【k8s】如何搭建搭建k8s服务器集群（Kubernetes）

搭建k8s服务器集群 服务器搭建环境随手记 文章目录搭建k8s服务器集群前言&#xff1a;一、前期准备&#xff08;所有节点&#xff09;1.1所有节点&#xff0c;关闭防火墙规则&#xff0c;关闭selinux&#xff0c;关闭swap交换&#xff0c;打通所有服务器网络&#xff0c;进行p…
阅读更多...
Bash Shell 通过ls命令筛选文件

Bash Shell 通过ls命令筛选文件

Bash Shell 通过ls命令及其管道根据大小名称筛选文件 最近参与的项目当中有需要用pyarmor加密项目的要求&#xff0c;听网上吹的pyarmor都那么神&#xff0c;用了一下感觉也一般&#xff0c;试用版普通模式下文件加密居然还有大小32KB的限制&#xff0c;加密到一半就失败了&am…
阅读更多...
Linux常用命令汇总

Linux常用命令汇总

1、tcpdump抓包 tcpdump这个命令是用来抓包的&#xff0c;默认情况下这个命令是没有的&#xff0c;需要安装一下&#xff1a; yum install -y tcpdump 使用这个命令的时候最好是加上你网卡的名称&#xff0c;不然可能使用不了&#xff1a; tcpdump -nn -i {网卡名称} 网卡名称…
阅读更多...
iOS开发笔记之九十六——本地Data Persistence总结笔记

iOS开发笔记之九十六——本地Data Persistence总结笔记

本质上来说&#xff0c;不管是哪种缓存方式最终都会以文件的形式存储在磁盘上&#xff0c;只不过上层进行了某种“封装”或“抽象”&#xff0c;所以还是做了分类&#xff0c;目前iOS本地持久化缓存&#xff08;Storage/Persistence&#xff09;有以下几种形式&#xff1a;User…
阅读更多...
vTESTstudio - VT System CAPL Functions - VT2004（续1）

vTESTstudio - VT System CAPL Functions - VT2004（续1）

成熟,就是某一个突如其来的时刻,把你的骄傲狠狠的踩到地上,任其开成花或者烂成泥。vtsStartStimulation - 启动激励输出功能&#xff1a;自动激励输出注意&#xff1a;在启动激励输出之前&#xff0c;一定要设置好输出模式Target&#xff1a;目标通道变量空间名称&#xff0c;例…
阅读更多...
TLB内存页表 - LoongArch

TLB内存页表 - LoongArch

TLB内存页表 - LoongArch 文章目录TLB内存页表 - LoongArch页表操作指令TLB相关寄存器页表格式CpuSetAttributesUEFI Memory attribute页表操作指令 LDDIR: 用于软件页表遍历过程中目录项的访问. LDPTE: 用于在软件页表遍历过程中页表项的访问. INVTLB: 用于无效TLB中的内容. …
阅读更多...
Mybatis源码分析：Mybatis的数据存储对象

Mybatis源码分析：Mybatis的数据存储对象

前言&#xff1a;SQLSession是对JDBC的封装 一&#xff1a;SQLSession和JDBC的对照说明 左边是我们的客户端程序&#xff0c;右边是我们的MySQL数据仓&#xff0c;或者叫MySQL实例 Mybatis是对JDBC的封装&#xff0c;将JDBC封装成了一个核心的SQLSession对象 JDBC当中的核心对…
阅读更多...
2023年浙江理工大学MBA招生考试初试成绩查询及复查的通知

2023年浙江理工大学MBA招生考试初试成绩查询及复查的通知

根据往年的情况&#xff0c;2023浙江理工大学MBA考试初试成绩可能将于2月21日下午两点公布&#xff0c;为了广大考生可以及时查询到自己的分数&#xff0c;杭州达立易考教育为大家汇总了信息。 一、成绩查询考生可登录中国研究生招生信息网“全国硕士研究生招生考试初试成绩查询…
阅读更多...
二十四节气—雨水，好雨知时节，当春乃发生。

二十四节气—雨水，好雨知时节，当春乃发生。

雨水&#xff0c;是二十四节气之第2个节气。 雨水节气不仅表明降雨的开始及雨量增多&#xff0c;而且表示气温的升高&#xff0c;意味着进入气象意义的春天。 雨水节是一个非常富有想象力和人情味的节气&#xff0c;在这一天&#xff0c;不管下不下雨都充满着一种雨意蒙蒙的诗…
阅读更多...
nps内网穿透工具

nps内网穿透工具

一、准备一台有公网ip的服务器 https://github.com/ehang-io/nps/releases 在这个地址下载服务端的安装包&#xff0c;centos的下载这个 上传到服务器上。 二、然后解压&#xff0c;安装&#xff0c;启动 [rootadministrator ~]# tar xzvf linux_amd64_server.tar.gz [roo…
阅读更多...
【C语言】预编译

【C语言】预编译

&#x1f6a9;write in front&#x1f6a9; &#x1f50e;大家好&#xff0c;我是謓泽&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f3c5;2021年度博客之星物联网与嵌入式开发TOP5&#xff5…
阅读更多...
[架构之路-110]-《软考-系统架构设计师》-软件架构设计-3-架构描述语言ADL与UML

[架构之路-110]-《软考-系统架构设计师》-软件架构设计-3-架构描述语言ADL与UML

前言&#xff1a;第3节 架构描述语言ADL3.1 ADL概述3.1.1 什么是ADLADL&#xff0c;即架构描述语言(Architecture Description Language)。两个重要的团体在使用架构描述语言术语。它们是&#xff1a;软件工程团体企业建模和工程团体。在软件工程团体&#xff0c;架构描述语言&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023