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

原创

已于 2024-02-06 23:05:03 修改 · 1w 阅读

标签

#ui #vue.js #前端

于 2023-02-18 00:20:07 首次发布

本文介绍了如何在手机或移动端使用Vant和NutUI这两个UI框架。首先提到了腾讯的TDesign因其较新的版本和setup语法而受到关注，但这里主要演示了Vant和NutUI的使用。在Vant部分，详细阐述了从创建项目、安装依赖到引用组件的步骤，并展示了运行效果。接着，对于NutUI，同样演示了安装、全局引入以及组件使用的流程。文章提供了每个框架的代码示例和运行截图，帮助读者理解和应用这些UI库。

该文章已生成可运行项目，

下面推荐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-

本文章已经生成可运行项目