手机/移动端的UI框架-Vant和NutUI
2024-05-18 21:08:19
下面推荐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 -Dnpm 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
手机/移动端的UI框架-Vant和NutUI相关推荐
- 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
- 一些移动端的ui框架
一些移动端的ui框架 https://jqweui.cn/resource 转载于:https://www.cnblogs.com/fps2tao/p/9145287.html
- 前端ui框架_推荐几个移动端前端UI框架
SUI Mobile http://m.sui.taobao.org/components/#popup SUI Mobile 是一套基于 Framework7 开发的UI库. MUI MUI-最接近 ...
- 移动端前端UI框架推荐
本文链接:https://blog.csdn.net/wangyile4399/article/details/102564106 SUI Mobile http://m.sui.taobao.o ...
- frozen ui php,推荐几个移动端前端UI框架
SUI Mobile http://m.sui.taobao.org/components/#popup SUI Mobile 是一套基于 Framework7 开发的UI库. MUI ...
- UI框架 Vant、ElementUI、WeUI、AUI、LayUI
UI框架有很多,比如微信官方为公众号开发提供的WeUI.适合后端程序员使用的Layui等.UI框架一般只是给前端狗写静态页面提供方便. 这类框架一般提供css和js文件,使用时引入css和js文件,然 ...
- 移动端vue ui框架总结
Mint UI 基于 Vue.js 的移动端组件库 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的 ...
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录. 官网定义:Element,一套为开发者.设计师和产品经理 ...
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
今晚看了一下基于vuejs的ui框架iview,感觉UI挺好看的,那么在vue项目中应该如何使用iview呢?以下做简单的记录. 首先安装iview: $ npm install iview --sa ...
最新文章
- wamp安装多版本php,WampServer安装多个php版本
- MySql设置外网访问
- 【script】python 中文汉字与url的转换
- PyTorch出现RuntimeError: Function AddBackward0 returned an invalid gradient at index 1
- rbf神经网络参数设置_基于梯度下降法的RBF神经网络（04）
- Matlab：实现菲涅尔直边衍射仿真
- 【供应链架构day2】美团收单供应链系统的演进之路
- 大容量化验室专用DD6K离心机
- phpnow升级mysql版本_phpnow1.5.6-1升级phpmyadmin,php及mysql版本
- Docsify+github/gitee搭建个人博客
- VSCode HTML文件 英文感叹号 ! + Tab 没有出现模板 解决方法
- 定积分之几种常见曲线
- python_生成器简介
- 基恩士XG-XvisionEditor程序的上传与下载
- ThinkPHP5/PHP 使用TCPDF 生成PDF文件
- tomcat使用详解(week4_day2)--技术流ken
- 抖音短视频企业团队SOP策划运营工作计划表格
- 香港科技大学(广州)信息枢纽手册
- 一句话木马@eval($_POST[“cmd“])；是什么意思(超详细)
- 计算机等级考试心得体会,计算机等级考试心得体会(2)