NaiveUI Admin 撸骨架—准备篇

前端

2024-01-25 18:30:49

前言

最近关于 Admin 骨架屏的话题比较多，所以打算写个教程。第一篇文章主要来说一说在开始写实际业务代码之前的一些准备工作，后续会持续更新。

一、初识骨架屏

骨架屏是一种在数据加载时展示的临时界面，旨在改善用户体验。它通常由简单形状和颜色组成，用来模拟实际内容的布局和结构。当数据加载完成后，骨架屏就会被替换为实际内容。

二、使用 NaiveUI 搭建骨架屏

NaiveUI 是一个 Vue 组件库，它提供了丰富的组件，可以用来快速搭建骨架屏。这些组件包括：

<NLoading>：用于显示加载中状态的组件
<NCard>：用于显示卡片信息的组件
<NButton>：用于显示按钮的组件
<NProgress>：用于显示进度条的组件

三、环境搭建

在开始搭建骨架屏之前，我们需要先搭建好开发环境。

1. 安装 Vue CLI

npm install -g @vue/cli

2. 创建项目

vue create naiveui-admin

3. 安装 NaiveUI

npm install naive-ui

4. 配置 NaiveUI

在 src/main.js 文件中，添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'

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

四、构建骨架屏

接下来，就可以开始构建骨架屏了。

1. 创建骨架屏组件

在 src/components 目录下，创建一个名为 Skeleton.vue 的文件，并添加以下代码：

<template>
  <div>
    <n-loading />
    <n-card>
      <template #header>
        <h2>{{ title }}</h2>
      </template>
      <template #body>
        <p>{{ content }}</p>
      </template>
    </n-card>
  </div>
</template>

<script>
export default {
  name: 'Skeleton',
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  }
}
</script>

2. 使用骨架屏组件

在 src/App.vue 文件中，添加以下代码：

<template>
  <div>
    <skeleton title="骨架屏标题" content="骨架屏内容" />
  </div>
</template>

<script>
import Skeleton from '@/components/Skeleton.vue'

export default {
  name: 'App',
  components: {
    Skeleton
  }
}
</script>