初探 NaiveUI，深度剖析 Admin 管理骨架

进入本系列第二篇文章，我们即将进入实战环节。尽管前文省略了使用 Vite 创建 Vue.js 3 项目的过程，但我相信这个步骤并不难倒您。现在，让我们共同探索如何使用 NaiveUI 组件库来构建一个现代化且响应式的管理系统骨架。

首先，让我们从登录界面开始。

1. 搭建基本框架

首先，我们要搭建登录界面的基本框架。这里，我们采用经典的网格布局，使用 NaiveUI 的 n-grid 组件来划分区域。具体代码如下：

<template>
  <n-grid class="login-container">
    <n-col :span="12">
      <n-card>
        <template #header>
          <h1>登录</h1>
        </template>
        <n-form @submit="onSubmit" label-placement="top">
          <n-form-item label="用户名">
            <n-input v-model="username" placeholder="请输入用户名" />
          </n-form-item>
          <n-form-item label="密码">
            <n-input
              v-model="password"
              type="password"
              placeholder="请输入密码"
            />
          </n-form-item>
          <n-form-item>
            <n-button type="primary" html-type="submit">登录</n-button>
          </n-form-item>
        </n-form>
      </n-card>
    </n-col>
  </n-grid>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const username = ref('')
    const password = ref('')

    const onSubmit = (e) => {
      e.preventDefault()
      // 这里可以加入登录逻辑
    }

    return {
      username,
      password,
      onSubmit,
    }
  },
}
</script>

<style>
.login-container {
  height: 100vh;
}
</style>

2. 添加交互元素

接下来，我们来添加一些交互元素，比如按钮和表单验证。这里，我们使用 NaiveUI 的 n-button 和 n-form-item 组件来实现。具体代码如下：

<template>
  <n-grid class="login-container">
    <n-col :span="12">
      <n-card>
        <template #header>
          <h1>登录</h1>
        </template>
        <n-form @submit="onSubmit" label-placement="top">
          <n-form-item label="用户名" :rules="usernameRules">
            <n-input v-model="username" placeholder="请输入用户名" />
          </n-form-item>
          <n-form-item label="密码" :rules="passwordRules">
            <n-input
              v-model="password"
              type="password"
              placeholder="请输入密码"
            />
          </n-form-item>
          <n-form-item>
            <n-button type="primary" html-type="submit">登录</n-button>
          </n-form-item>
        </n-form>
      </n-card>
    </n-col>
  </n-grid>
</template>

<script>
import { ref } from 'vue'
import { useForm } from '@formily/vue'

export default {
  setup() {
    const username = ref('')
    const password = ref('')

    const usernameRules = [
      {
        required: true,
        message: '用户名不能为空',
      },
      {
        minLength: 6,
        message: '用户名至少需要6个字符',
      },
    ]

    const passwordRules = [
      {
        required: true,
        message: '密码不能为空',
      },
      {
        minLength: 8,
        message: '密码至少需要8个字符',
      },
    ]

    const onSubmit = (e) => {
      e.preventDefault()
      // 这里可以加入登录逻辑
    }

    return {
      username,
      password,
      usernameRules,
      passwordRules,
      onSubmit,
    }
  },
}
</script>

<style>
.login-container {
  height: 100vh;
}
</style>

3. 响应式设计

最后，我们来对登录界面进行响应式设计，以确保它在不同的设备上都能正常显示。这里，我们使用 NaiveUI 的 n-responsive 组件来实现。具体代码如下：

<template>
  <n-responsive class="login-container">
    <n-col :span="12">
      <n-card>
        <template #header>
          <h1>登录</h1>
        </template>
        <n-form @submit="onSubmit" label-placement="top">
          <n-form-item label="用户名" :rules="usernameRules">
            <n-input v-model="username" placeholder="请输入用户名" />
          </n-form-item>
          <n-form-item label="密码" :rules="passwordRules">
            <n-input
              v-model="password"
              type="password"
              placeholder="请输入密码"
            />
          </n-form-item>
          <n-form-item>
            <n-button type="primary" html-type="submit">登录</n-button>
          </n-form-item>
        </n-form>
      </n-card>
    </n-col>
  </n-responsive>
</template>

<script>
import { ref } from 'vue'
import { useForm } from '@formily/vue'

export default {
  setup() {
    const username = ref('')
    const password = ref('')

    const usernameRules = [
      {
        required: true,
        message: '用户名不能为空',
      },
      {
        minLength: 6,
        message: '用户名至少需要6个字符',
      },
    ]

    const passwordRules = [
      {
        required: true,
        message: '密码不能为空',
      },
      {
        minLength: 8,
        message: '密码至少需要8个字符',
      },
    ]

    const onSubmit = (e) => {
      e.preventDefault()
      // 这里可以加入登录逻辑
    }

    return {
      username,
      password,
      usernameRules,
      passwordRules,
      onSubmit,
    }
  },
}
</script>

<style>
.login-container {
  height: calc(100vh - 40px);
}

@media screen and (max-width: 768px) {
  .login-container {
    height: calc(100vh - 80px);
  }
}
</style>

至此，我们就完成了一个现代化且响应式的管理系统登录界面。希望本篇文章能够对您有所帮助，也欢迎您在评论区分享您的心得体会。