基于 Vue 3 （TypeScript 和 Naive UI 组件库）的项目信息展示页面

徐福记c

已于 2025-03-17 22:02:24 修改

阅读量1.1k

点赞数 7

分类专栏：前端VUE3 fast-soy-admin-dev 开发脚手架文章标签： ubuntu linux 运维

于 2025-03-17 18:17:50 首次发布

本文链接：https://blog.csdn.net/xuukai/article/details/146322029

版权

fast-soy-admin-dev 开发脚手架同时被 2 个专栏收录

149 篇文章

订阅专栏

前端VUE3

54 篇文章

订阅专栏

基于 Vue 3 的项目信息展示页面，使用了 TypeScript 和 Naive UI 组件库。实现了一个响应式的项目信息展示页面，主要功能包括：

展示项目简介、基本信息、依赖项和开发依赖项。
根据设备类型调整布局（移动端为单列，桌面端为双列）。
使用本地化支持多语言展示。
通过 Naive UI 组件库实现现代化的界面设计。

代码结构清晰，功能完善，适合用于项目管理、文档展示等场景。

以下是对代码的详细解读：

脚本部分（`<script setup lang="ts">`）

导入依赖和定义响应式数据
```
import { computed } from 'vue';
import { $t } from '@/locales';  //支持多语言
import { useAppStore } from '@/store/modules/app';  //判断是否为移动端
import pkg from '~/package.json';
```
- 导入 Vue 的 computed 函数用于创建计算属性。
- 导入本地化工具 $t，用于多语言支持。
- 导入应用状态管理 useAppStore，用于获取应用状态（如是否为移动端）。
- 导入项目的 package.json 文件，用于获取项目信息和依赖项。
获取应用状态和计算列数
```
const appStore = useAppStore();
const column = computed(() => (appStore.isMobile ? 1 : 2));
```
- 获取应用状态实例 appStore。
- 定义计算属性 column，根据设备类型（移动端或桌面端）决定展示的列数（移动端为1列，桌面端为2列）。

定义接口和处理依赖项数据

interface PkgJson {
  name: string;
  version: string;
  dependencies: PkgVersionInfo[];
  devDependencies: PkgVersionInfo[];
}

interface PkgVersionInfo {
  name: string;
  version: string;
}

function transformVersionData(tuple: [string, string]): PkgVersionInfo {
  const [$name, $version] = tuple;
  return { name: $name, version: $version };
}

定义 PkgJson 接口，描述项目信息的数据结构。
定义 PkgVersionInfo 接口，描述依赖项的名称和版本信息。
定义 transformVersionData 函数，将依赖项的键值对转换为 PkgVersionInfo 格式。

处理项目信息和依赖项

const { name, version, dependencies, devDependencies } = pkg;

const pkgJson: PkgJson = {
  name,
  version,
  dependencies: Object.entries(dependencies).map(item => transformVersionData(item)),
  devDependencies: Object.entries(devDependencies).map(item => transformVersionData(item))
};

从 package.json 中解构出项目名称、版本号、依赖项和开发依赖项。
创建 pkgJson 对象，整合项目信息和处理后的依赖项数据。

获取构建时间
```
const latestBuildTime = BUILD_TIME;
```
- 获取项目的最新构建时间（假设 BUILD_TIME 是一个全局变量或环境变量）。

模板部分（`<template>`）

页面布局
```
<NSpace vertical :size="16">
  
</NSpace>
```
- 使用 NSpace 组件垂直排列内容，设置间距为16。
- NSpace 是 Naive UI 框架中的一个组件，用于在垂直方向上排列其子组件或元素。
  
  在使用 NSpace 组件时，可以通过设置其属性来控制子元素之间的间距、对齐方式等，从而实现灵活的垂直布局。例如，在模态框的header和footer中使用NSpace来排列按钮和输入框。
项目简介卡片
```
<NCard :title="$t('page.about.title')" :bordered="false" size="small" segmented class="card-wrapper">
  <p>{{ $t('page.about.introduction') }}</p>
</NCard>
```
- 使用 NCard 组件展示项目简介，标题和内容通过本地化工具 $t 获取。
- NCard 是 Naive UI 框架中的一个组件，用于创建卡片式的布局块，通常用来展示内容集合，可以包含标题、正文、操作按钮等元素。

项目信息卡片

<NCard :title="$t('page.about.projectInfo.title')" :bordered="false" size="small" segmented class="card-wrapper">
  <NDescriptions label-placement="left" bordered size="small" :column="column">
    <!-- 项目信息项 -->
  </NDescriptions>
</NCard>

展示项目的基本信息，包括版本号、构建时间、GitHub链接和预览链接。
使用 NDescriptions 和 NDescriptionsItem 组件以表格形式展示信息。

依赖项卡片

<NCard :title="$t('page.about.prdDep')" :bordered="false" size="small" segmented class="card-wrapper">
  <NDescriptions label-placement="left" bordered size="small" :column="column">
    <NDescriptionsItem v-for="item in pkgJson.dependencies" :key="item.name" :label="item.name">
      {{ item.version }}
    </NDescriptionsItem>
  </NDescriptions>
</NCard>

展示项目的生产依赖项，通过循环渲染依赖项列表。

开发依赖项卡片

<NCard :title="$t('page.about.devDep')" :bordered="false" size="small" segmented class="card-wrapper">
  <NDescriptions label-placement="left" bordered size="small" :column="column">
    <NDescriptionsItem v-for="item in pkgJson.devDependencies" :key="item.name" :label="item.name">
      {{ item.version }}
    </NDescriptionsItem>
  </NDescriptions>
</NCard>

展示项目的开发依赖项，与生产依赖项类似。

样式部分（`<style scoped>`）

<style scoped></style>

当前代码中没有定义具体的样式，scoped 表示样式仅作用于当前组件。

_____________________________________________________________________________

NCard 是 Naive UI 框架中的一个组件，用于创建卡片式的布局块，通常用来展示内容集合，可以包含标题、正文、操作按钮等元素。

以下是 NCard 的一些主要功能和用法：

功能

展示内容集合：以卡片的形式展示信息，使内容更加清晰、有组织。
自定义外观：通过设置属性来自定义卡片的外观和行为，如标题、边框、样式等。
操作交互：支持添加操作按钮、悬停效果、加载状态等功能，增强用户交互体验。

常用属性

title：设置卡片的标题，可以是字符串或模板引用。
bordered：控制卡片是否显示边框，默认为 true。
header-style 和 body-style：分别用于自定义头部和主体的样式。
footer：在卡片底部添加内容。
actions：在卡片右上角添加操作按钮，数组中的每个元素是一个包含 text 和 onClick 的对象。
hoverable：设置为 true 时，鼠标悬停在卡片上会有浮起效果。
loading：指示卡片内容是否正在加载中，设置为 true 时会显示加载占位符。
size：设置卡片的大小，可选值包括 'default' 和 'small'。
type：指定卡片类型，例如设置为 'inner' 可以让卡片看起来像是内嵌式的。
cover 和 avatar：在卡片顶部添加封面图片或头像。
description：添加对卡片内容的描述性文字。
style：为整个卡片设置内联样式。

示例

<template>
  <n-card
    title="我的卡片"
    :bordered="true"
    :hoverable="true"
    :actions="[
      { text: '详情', onClick: () => {} },
      { text: '编辑', onClick: () => {} }
    ]"
  >
    <p>这是卡片的内容部分。</p>
    <n-button type="primary">点击我</n-button>
  </n-card>
</template>

<script setup>
import { NCard, NButton } from 'naive-ui';
</script>

在这个示例中，创建了一个带有标题、内容、操作按钮和悬停效果的卡片。