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

article/2025/8/21 8:50:33

下面推荐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://chatgpt.dhexx.cn/article/l421e4Vi.shtml

相关文章

一:移动端UI框架mint-ui

一:移动端UI框架mint-ui

官网按需引入的.babelrc写法是老的写法,配置的plugins一直报错是因为"component"后面不要[]直接跟{} 一&#xff1a;Mint-UI中按钮组件的使用 简介:Mint UI是基于 Vue.js 的移动端组件库.mint-ui官网链接 1.安装 // 安装 # Vue 1.x npm install mint-ui1 -S # Vue…
阅读更多...
vue3使用的移动端UI框架,vue3.0 ui组件库

vue3使用的移动端UI框架,vue3.0 ui组件库

vue 3.0 项目中 element-ui form 表单元素中 仅 el-button 显示&#xff0c;其他不显示&#xff0c;如何解决&#xff1f; 谷歌人工智能写作项目&#xff1a;小发猫 在页面中引用了laydate插件&#xff0c;在显示的时候&#xff0c;字体图标一直显示不出来 typescript&#x…
阅读更多...
值得推荐的Vue 移动端UI框架

值得推荐的Vue 移动端UI框架

1. Vant&#xff08;支持Vue3&#xff09; 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库&#xff0c;提供了一整套 UI 基础组件和业务组件&#xff0c;这是我目前用过最好用的框架。 中文文档 | github地址 | 在线预览 2. Mint UI Mint UI 由饿了么前端团队推出的 M…
阅读更多...
移动端UI框架总结

移动端UI框架总结

1. React Native 网站地址:React Native 中文网 使用React来编写原生应用的框架 GitHub:https://github.com/facebook/react-native 网站描述:Facebookt推出基于 React 的创建跨平台移动应用开发框架 React Native使你能够在Javascript和React的基础上获得完全一致的开发体验…
阅读更多...
与运算（）、或运算（|）、异或运算（^）的本质 及 用途，文末附加 位运算面试题

与运算（）、或运算（|）、异或运算（^）的本质 及 用途，文末附加 位运算面试题

目录 一&#xff1a;与运算符&#xff08;&&#xff09;and 1、运算规则&#xff1a; 2、例如&#xff1a;3&5 3、用途&#xff1a; 1&#xff09;判断 奇偶性 2&#xff09;清零。 3&#xff09;取一个数中指定位 二&#xff1a;或运算&#xff08;|&#xff…
阅读更多...
Python与或运算

Python与或运算

今天碰到一道有意思的题目&#xff0c;看了之后发现自己对Python与或的理解还是欠缺&#xff0c;如下。 题目&#xff1a;求12…n 来源&#xff1a;Leetcode 如果不加限制&#xff0c;我们有很多方法计算该值&#xff0c;例如高斯公式&#xff0c;递归等。 我们思考下递归的解…
阅读更多...
sql查询数据表某列的重复值并计数

sql查询数据表某列的重复值并计数

查询sql为&#xff1a; SELECTdevice_id,count( device_id ) AS number FROMcms_sticker_member GROUP BYdevice_id HAVINGcount( device_id ) > 1 ORDER BYnumber DESC; 结果&#xff1a;
阅读更多...
查询多个字段同时重复2次以上的记录的sql的次数

查询多个字段同时重复2次以上的记录的sql的次数

表数据如上图&#xff0c; 1.筛选 type、pid 重复的数据的次数大于等于2的 次数和对应的数据值 SELECT COUNT(*),TYPE,pid FROM AREA GROUP BY TYPE,pid HAVING COUNT(*)>2; 2.筛选 type、pid 重复的数据的次数大于等于2&#xff0c;并且对应的 pid和type值相反的重复的数…
阅读更多...
sql查询、删除重复相同数据的语句或只保留一条数据

sql查询、删除重复相同数据的语句或只保留一条数据

1、查询&#xff08;字段1, 字段2, 字段3&#xff09;全部重复相同的数据 SELECT * FROM 表 WHERE (字段1, 字段2, 字段3) IN (SELECT 字段1, 字段2, 字段3 FROM 表 GROUP BY 字段1, 字段2, 字段3 HAVING COUNT(*) > 1) ORDER BY 排序字段2、过滤&#xff08;字段1, 字段…
阅读更多...
分享SQL重复记录查询的几种方法

分享SQL重复记录查询的几种方法

SQL重复记录查询的几种方法&#xff0c;需要的朋友可以参考一下 1、查找表中多余的重复记录&#xff0c;重复记录是根据单个字段&#xff08;peopleId&#xff09;来判断 代码如下: select * from people where peopleId in (select peopleId from people group by peo…
阅读更多...
SQL查询重复记录

SQL查询重复记录

1、查找表中多余的重复记录&#xff0c;重复记录是根据单个字段&#xff08;peopleId&#xff09;来判断 select * from people where peopleId in (select peopleId from people group by peopleId having count(peopleId) > 1) 2、删除表中多余的重复记录&#xff0c;重…
阅读更多...
为什么int无法转换为Double？？？？

为什么int无法转换为Double？？？？

规律&#xff1a;拆、装箱和升、降级两者可以在同一条语句中进行&#xff0c;但是一定要先拆箱或装箱再升级或者降级。。。 一条语句中&#xff0c;int无法转换为Double&#xff0c;因为这里涉及到先升级再装箱子&#xff0c;拆装箱一定要在升降级前面。。。。。 一条语句中&…
阅读更多...
C++中int或double与string的相互转换

C++中int或double与string的相互转换

一、int转string 1.c11标准增加了全局函数std::to_string: string to_string (int val); string to_string (long val); string to_string (long long val); string to_string (unsigned val); string to_string (unsigned long val); string to_string (unsigned long …
阅读更多...
java byte[]转int和double

java byte[]转int和double

一般无需java来处理byte字节的数据转成 int , C语言更适合干这事. 但是无奈遇到了这种需求. 网上百度了一小部分代码, 发现好多错误代码… 干脆自己手写了一遍… byte[]数据的格式协议文档如下: 先上使用代码 byte[] hex Base64.getDecoder().decode(data); int head Read…
阅读更多...
详细讲解int、float与double的区别

详细讲解int、float与double的区别

最近为了看一下float的精确度仔细看了一下这三种数据在内存中的样子&#xff0c;看了一下别人的博客发现大家对精度都有这不同的定义&#xff0c;我自己也简单画了一下。 下面来主要讲解一下int、float与double三者的区别与详解 一、int&#xff08;最简单的一种&#xff09;…
阅读更多...
c++ string转int, double，int,double转string

c++ string转int, double，int,double转string

c string与常用数值变量互转 写了几个字符串与数值变量互相转换的几个函数&#xff0c;每次用到都要上网查一堆&#xff0c;耽误时间&#xff0c;写好放到这里备用。方法有很多&#xff0c;这里列出来测试过能用的&#xff0c;其他方法慢慢添加。以下函数自动判断int或者double…
阅读更多...
C++下string类型转double类型

C++下string类型转double类型

最近coding的时候随手写了std::stod()函数来进行类型的转换&#xff0c;发现输出的时候自动做了小数位的截取 尝试使用std::stold()函数转换成long double类型之后&#xff0c;依旧不能解决问题&#xff0c;输出依旧不是想要的 发现网上对这个问题的解答没有&#xff0c;于是…
阅读更多...
double类型转换成int类型

double类型转换成int类型

1、案例演示 public class test09 {public static void main(String[] args) {double a 5000.44;double b 100.12;double v a / b;int i new Double(v).intValue();System.out.println(i);System.out.println(v);} } 运行结果&#xff1a; 49 49.944466640031955 2、源…
阅读更多...
移动光猫超级管理员密码获取

移动光猫超级管理员密码获取

我的型号是ZN-M142G 一 、开启telnet 1.电脑开启telnet &#xff08;自行百度&#xff09; 2.登录192.168.1.1 3.把路由器后台网址替换&#xff08;如果光猫已经开启telnet请忽略&#xff09;​​​​​​http://192.168.1.1/getpage.gch?pid1002&nextpagetele_sec_ts…
阅读更多...
移动光猫只有一个lan口？其他是电视用，如何增lan口

移动光猫只有一个lan口？其他是电视用，如何增lan口

输入192.168.1.1&#xff0c;用超级账号登陆&#xff0c;&#xff08;如何得到超级账号呢&#xff0c;可以让维护小区的移动工作人员给你&#xff09;我发现家里的光猫只有一个lan口&#xff0c;通过超级账号登陆发现&#xff0c;其他三个&#xff08;lan1~lan3&#xff09;都分…
阅读更多...
推荐文章

Copyright @ 2022~2023