将UI界面交给第三方库

当你了解了 Vue 项目构建和开发的基本知识后，我认为接下来你一定想亲自在构建出的项目中填充自己的业务和功能逻辑，因为目前其还是空白的。

但是这里我不会教你如何实现一个具体的业务和功能模块，因为每个人想要实现的东西都可能不尽相同。如果你想快速开发一款应用，并且不想过多的操心页面 UI 层次的内容，比如你不想去实现一个下拉 UI 组件或设计一个 icon 图标，那么我想你有必要了解下 UI 库及图标库的应用。

UI 库

UI库（User Interface Library）是指提供一系列预构建的用户界面组件和样式的代码库，这些组件可以帮助开发者快速构建美观、一致且功能丰富的Web应用程序。UI库通常包括按钮、表单元素、布局系统、导航栏等基本组件，也可能包含图表、通知系统、日期选择器等更复杂的组件。

因为这里介绍的js框架是Vue，所以在 Vue 项目中我们需要使用基于 Vue 开发的 UI 库。接下里我会以现阶段较为流行的Element Plus为例。

Element Plus的安装和配置

Element Plus 是一个为 Vue 3 设计的 UI 组件库，是 Element UI 的升级版本，旨在提供更好的性能、更丰富的功能和更现代化的设计，适合开发者构建高质量的桌面端应用程序。Element Plus 继承了 Element UI 的设计理念，同时结合了 Vue 3 的新特性，如 Composition API 和更好的 TypeScript 支持。

Element Plus 的核心特点

• Vue 3 兼容性: 完全支持 Vue 3，利用其新特性来改善开发体验。
• 丰富的组件: 提供了大量的 UI 组件，涵盖表单、导航、数据展示等多种需求。
• 性能提升: 通过使用 Vue 3 的新特性，Element Plus 在性能上有了显著的提升，特别是在处理大型列表或复杂组件时。
• 活跃的社区: 作为一个较新的项目，Element Plus 拥有一个快速成长且活跃的社区，这意味着你能更快地得到问题的帮助和支持。
• TypeScript 支持: 更好的 TypeScript 支持，提供类型定义，方便开发者进行类型检查。

基本使用

以下是使用 Element Plus 的基本步骤：

1. 安装 Element Plus

在你的 Vue 3 项目中安装 Element Plus，可以通过 npm 或 yarn 进行安装：

npm install element-plus --save

或者

yarn add element-plus

2. 配置 Element Plus

在你的 Vue 项目的入口文件（通常是 main.js）中引入 Element Plus 组件库：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css'; // 引入 Element Plus 的样式

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3. 使用 Element Plus 组件

在你的 Vue 组件中，你可以直接使用 Element Plus 提供的组件：

<template>
    <div>
        <el-button type="primary" @click="showMessage">点击我</el-button>
        <el-dialog :visible.sync="dialogVisible" title="提示">
            <span>这是一个对话框</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const dialogVisible = ref(false);

        const showMessage = () => {
            dialogVisible.value = true;
        };

        return {
            dialogVisible,
            showMessage,
        };
    },
};
</script>

常用组件

Element Plus 提供了一系列常用的组件，以下是一些常见组件的示例：

1. Button:

   <el-button type="success">成功按钮</el-button>

2. Input:

   <el-input v-model="inputValue" placeholder="请输入内容"></el-input>

3. Table:

   <el-table :data="tableData">
       <el-table-column prop="date" label="日期" />
       <el-table-column prop="name" label="姓名" />
       <el-table-column prop="address" label="地址" />
   </el-table>

4. Select:

   <el-select v-model="selected" placeholder="请选择">
       <el-option label="选项1" value="option1"></el-option>
       <el-option label="选项2" value="option2"></el-option>
   </el-select>

主题定制

Element Plus 支持主题定制，开发者可以通过修改 Less 变量来调整主题样式，或者使用 Element Plus 提供的主题生成工具。

国际化

Element Plus 提供了国际化功能，可以通过 Vue I18n 插件轻松实现多语言支持。如果需要使用其他语言，可以参考 Element Plus 的文档进行配置。

其他 UI 库（框架）

除了之前提到的 UI 库，还有许多其他优秀的 UI 库（框架）可以用于不同的前端框架或纯 HTML/CSS/JS 项目。以下是一些常见的 UI 库和框架，涵盖了不同的技术栈和使用场景：

1. Ant Design Vue

• 简介: Ant Design Vue 是基于 Ant Design 设计体系的 Vue 组件库，专为企业级产品设计。
• 特点:
  • 组件丰富，样式优雅。
  • 提供了完善的文档和示例。
  • 支持国际化。
• 官网: Ant Design Vue

2. Vuetify

• 简介: Vuetify 是一个专为 Vue.js 应用设计的 Material Design 组件框架。
• 特点:
  • 提供了大量的 Material Design 组件。
  • 支持响应式设计，适合多种设备。
  • 内置的主题支持，可以轻松自定义主题。
• 官网: Vuetify

3. BootstrapVue

• 简介: BootstrapVue 将流行的 Bootstrap 组件与 Vue.js 结合在一起。
• 特点:
  • 利用 Bootstrap 的强大样式和布局功能。
  • 提供了易于使用的 Vue 组件。
  • 支持响应式设计，适合移动端和桌面端。
• 官网: BootstrapVue

 4. Vant

• 简介: Vant 是一款为移动端设计的 Vue 组件库，致力于提供高质量的移动端 UI 组件，适用于快速构建移动应用和网页。
• 特点:
  •  专为移动端设计，优化了触控体验和适配性。
  •  提供了详细的文档和示例，帮助开发者快速上手。
  • 提供了多种常用的 UI 组件，如按钮、输入框、对话框、卡片、导航等，能够满足移动端应用的基本需求。.
• 官网: Vant

5. Quasar Framework

• 简介: Quasar 是一个高性能的 Vue.js 框架，适合构建响应式网站、Electron 应用和移动应用。
• 特点:
  • 提供丰富的 UI 组件和插件。
  • 支持 SSR（服务器端渲染）和 PWA（渐进式 Web 应用）。
  • 有很好的文档和社区支持。
• 官网: Quasar

6. Buefy

• 简介: Buefy 是一个基于 Bulma CSS 框架的 Vue.js 组件库。
• 特点:
  • 轻量级，简单易用。
  • 具有响应式设计。
  • 提供了许多基本组件，适合快速开发。
• 官网: Buefy

7. PrimeVue

• 简介: PrimeVue 是一个功能丰富的 Vue 组件库，适合企业级应用开发。
• 特点:
  • 提供大量的组件和主题选项。
  • 具有优秀的文档和示例。
  • 支持国际化和易于定制。
• 官网: PrimeVue

8. Tailwind CSS

• 简介: Tailwind CSS 是一个功能类优先的 CSS 框架，可以与 Vue.js 等前端框架结合使用。
• 特点:
  • 提供低级别的样式工具，允许开发者自由构建独特的设计。
  • 强大的响应式设计功能。
  • 提供了 JIT（即时生成）模式，提升开发效率。
• 官网: Tailwind CSS

9. Chakra UI Vue

• 简介: Chakra UI 是一个简单、模块化且可访问的 UI 组件库，Vue 版本是专为 Vue.js 应用设计的。
• 特点:
  • 采用组合式 API，方便构建可复用的组件。
  • 高度可定制，支持主题。
  • 强调可访问性（a11y）。
• 官网: Chakra UI Vue

10. SvelteKit (Svelte)

• 简介: Svelte 是一个新型的前端框架，SvelteKit 是其应用框架，支持构建现代 Web 应用。
• 特点:
  • 无虚拟 DOM，编译为高效的原生 JavaScript。
  • 轻量高效，快速加载。
  • 与多个 UI 库兼容，可以灵活搭配使用。
• 官网: Svelte

图标库

了解完 UI 库，我们再来了解下图标库。图标库，顾名思义就是汇聚了大量图标的仓库，在这样的仓库中我们可以查找并下载我们想要的图标，甚至还可以制定颜色和大小。 在前端开发中，图标库是非常重要的工具，可以帮助开发者快速实现美观的图标和视觉效果。

在项目中使用图标库可以为我们的项目制定统一的图标管理标准，同时一定程度上也可以减少项目图片的数量。下面我们便来介绍下目前比较流行的一款图标库 Iconfont。。

使用 Iconfont 下载管理图标

Iconfont 是阿里妈妈 MUX 倾力打造的矢量图标管理、交流平台。 设计师将图标上传到 Iconfont 平台，用户可以自定义下载多种格式的 icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

在 Iconfont 首页，我们可以点击素材库来进行图标的搜索，也可以直接搜索。这里我随机展示一个。

 鼠标悬停在图标上面，点击添加入库，在右上角我们会发现购物车已经添加了。当你把想要添加的图标入库完后，点击右上角的购物车。

为了使图标便于今后管理，我们可以新建一个项目并将图标移入项目中。在项目中，我们便可以进行图标的添加、删除和下载等操作（需要登录）。

这里我们采用将图标下载到本地的方式进行使用，当然你也可以使用在线链接，但这会受到网络的影响。

Iconfont 的使用

在你的 HTML 文件中，引入生成的 CSS 文件：

<link rel="stylesheet" href="path/to/iconfont.css">

在 HTML 中使用图标，可以通过 class 属性来引用：

<i class="iconfont icon-example"></i>

其中 icon-example 是你选择的图标的类名。

自定义样式

可以通过 CSS 自定义图标的大小和颜色：

css
.icon-example {
    font-size: 24px; /* 设置图标大小 */
    color: #333; /* 设置图标颜色 */
}

其他图标库

1. Font Awesome

• 简介: Font Awesome 是最流行的图标库之一，提供了大量的矢量图标和社交媒体图标。
• 特点:
  • 支持多种样式（如 Solid, Regular, Light 等）。
  • 可以通过 CSS 或 JavaScript 使用。
  • 提供了 SVG 图标，支持自定义颜色和大小。
• 官网: Font Awesome

2. Material Icons

• 简介: Google 提供的 Material Icons 是一套基于 Material Design 设计语言的图标集。
• 特点:
  • 提供了多种图标，涵盖各种应用场景。
  • 支持多种大小和样式（如实心、轮廓等）。
  • 可以通过 Google Fonts 引入，使用简单。
• 官网: Material Icons

3. Ionicons

• 简介: Ionicons 是一套为 Ionic 框架设计的开源图标库，大量适用于移动端应用的精美图标，支持按需加载以减小最终打包体积。
• 特点:
  • 提供了一系列简单、清晰的图标，适合移动端和网页应用。
  • 支持 SVG 和 Web Font 格式。
  • 易于与 Angular、React 和 Vue 等框架集成。
• 官网: Ionicons

4. Feather Icons

• 简介: Feather 是一套简单、优雅的开源图标库，具有细线风格。
• 特点:
  • 所有图标都是 SVG 格式，可以自由自定义。
  • 提供了丰富的图标集合，适合各种项目。
  • 注重简洁性，适合现代设计。
• 官网: Feather Icons

5. Bootstrap Icons

• 简介: Bootstrap Icons 是 Bootstrap 官方提供的图标库。
• 特点:
  • 提供了大量的图标，适合与 Bootstrap 框架配合使用。
  • 采用 SVG 格式，方便自定义。
  • 设计风格与 Bootstrap 框架一致，易于集成。
• 官网: Bootstrap Icons

6. Boxicons

• 简介: Boxicons 是一个简单、可定制的图标库，适用于各种项目。
• 特点:
  • 提供了多种风格的图标，包括线性和实心图标。
  • 提供了图标的 CSS 和 SVG 格式。
  • 易于使用，适合快速开发。
• 官网: Boxicons

7. Octicons

• 简介: Octicons 是 GitHub 官方的图标库，适用于 GitHub 相关项目。
• 特点:
  • 提供了 GitHub 相关的图标，设计风格统一。
  • 采用 SVG 格式，支持自定义大小和颜色。
  • 适合开发者和开源项目使用。
• 官网: Octicons

原文地址：https://blog.csdn.net/Amireux_Cx330/article/details/145296970

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！