引言
在现代Web开发中，用户界面（UI）的设计与交互体验对应用的成功至关重要。为了提升开发效率和用户体验，各种UI组件库应运而生，成为开发者的重要工具。本文档将重点介绍三个流行的UI库——nav-ui、uni-ui和vant，并提供它们的基本使用方法和示例。
我们将首先探讨nav-ui，深入了解其图标组件的安装与使用，包括如何整合本地图标和第三方图标库，以便开发者能够轻松地定制自己的项目。接下来，uni-ui部分将重点讲解CSS的应用，帮助开发者充分利用该库提供的样式和布局功能。最后，我们将详细介绍vant，从项目创建到组件安装，逐步指导您如何将其集成到您的项目中。
通过这篇文章，您将获得对这三个UI库的全面理解，掌握它们的基本操作方法，为构建更具吸引力和功能性的用户界面打下坚实基础。
nav-ui
图标的简单使用
使用图标
npm i -D @vicons/ionicons5
之后就可以使用了
<n-icon size="40"> <game-controller-outline /> </n-icon>
路由里面的icon绑定为
icon: 'fluent:access-time-20-regular', fluent 为前缀
在页面使用
<!-- </n-space>--> <n-icon size="40"> <Checkmark16Filled /> </n-icon> import Checkmark16Filled from '@vicons/fluent/Checkmark16Filled'
用这个可以绑定 <svg-icon icon="mdi:emoticon"/>
<icon-select v-model:value="selectValue" :icons="icons" /> import { icons } from './icons'; // 选值 const selectValue = ref('');
本地图标
在src/assets/svg-icon文件夹下的svg文件，通过在template里面以 icon-local-{文件名} 直接渲染, 其中icon-local为.env文件里的 VITE_ICON_LOCAL_PREFIX 将本地的图标存为一个数组 const localIcons = ['custom-icon', 'activity', 'at-sign', 'cast', 'chrome', 'copy', 'wind'];
然后使用 <div v-for="(fileName, index) in localIcons" :key="index" class="mt-5px flex-x-center"> <svg-icon :local-icon="fileName" class="text-30px text-primary" /> </div>
<icon-local-cast class="text-20px text-error" />
表格简单使用
<template> <div> <!-- <n-data-table--> <!-- :scroll-x="1800"--> <!-- :columns="columns"--> <!-- :data="data"--> <!-- :row-key="rowKey"--> <!-- default-expand-all--> <!-- />--> <n-button @click="test">click me</n-button> </div> </template> <script lang="ts" setup> import type { DataTableColumns } from 'naive-ui' // import {fetchAllRoutes} from "@/service"; import {useRouterPush} from "@/composables"; import axios from "axios"; import {onMounted} from "vue"; const useRouter = useRouterPush(); onMounted(()=>{ axios({ url:"http://192.168.100.152:10010/getRouters" }) }) const test = ()=>{ // fetchAllRoutes().then(res=>{ // console.log(res) // }) useRouter.toHome() } type RowData = { name: string index: string children?: RowData[] } const data: RowData[] = [ { name: '07akioni', index: '07', children: [ { name: '08akioni', index: '08', children: [ { name: '09akioni', index: '09' }, { name: '10akioni', index: '10' } ] } ] }, { name: '11akioni', index: '11' } ] const columns: DataTableColumns<RowData> = [ { type: 'selection' }, { title: 'name', key: 'name' }, { title: 'index', key: 'index' } ] const rowKey=(row: RowData) => { return row.index; } </script>
树的使用
别名 label-field="name" key-field="parentId" children-field="whateverChildren"
uni-ui
使用css
https://uniapp.dcloud.net.cn/component/uniui/uni-sass.html
vant
先创建好项目
之后去项目的目录打开cmd
然后在cmd 中执行
然后在cmd 中执行 命令行 npm init -y 下载 npm i @vant/weapp -S --production
在项目的根路径下，创建 wxcomponents 目录，并将依赖项（node_modules）中@vant文件夹下的dist复制到wxcomponents，并修改文件夹名为vant;（主要是为了方便查看和引用）
创建文件夹然后放入信息
