UI 框架:nav-ui&uni-ui&vant

2024-10-16 11

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法，包括图标、表格和树的使用示例，以及如何在项目中安装和配置这些UI组件。对于`nav-ui`，详细说明了图标组件的安装与使用，包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后，`vant`部分提供了从项目创建到组件安装的具体步骤，以及如何将下载的组件正确地集成到项目中。

引言

在现代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;（主要是为了方便查看和引用）

创建文件夹然后放入信息