Vue 3 + Naive UI 后台控制台实战：从 0 到可交付

2026-09-15 1 分钟阅读 5 次浏览 Vabora 更新于 2026-09-26

后台不需要花哨，需要的是稳定、清晰、可维护。这一篇记录我用 Vue 3 + Naive UI 搭博客控制台的完整思路。技术选型 Vue 3 组合式 API：逻辑复用靠 composable 而不是 mixin Naive UI：主题变量齐全，暗色模式开箱可用原生 ESM：不上…

后台不需要花哨，需要的是稳定、清晰、可维护。这一篇记录我用 Vue 3 + Naive UI 搭博客控制台的完整思路。

#技术选型

Vue 3 组合式 API：逻辑复用靠 composable 而不是 mixin
Naive UI：主题变量齐全，暗色模式开箱可用
原生 ESM：不上构建工具，浏览器直接跑

#目录约定

public/assets/admin/js/
├── api.js        # 请求封装（统一 CSRF / 错误提示）
├── app.js        # 应用入口与路由
└── views/
    ├── dashboard.js
    ├── posts.js
    └── tags.js

#请求封装

统一处理 CSRF 头与 401：

export async function request(path, options = {}) {
  const response = await fetch(path, {
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
      ...(options.headers || {}),
    },
    ...options,
  });

  if (response.status === 401) {
    location.href = '/admin/login';
    throw new Error('登录已失效');
  }

  return response.json();
}

#表格 + 分页

Naive UI 的 n-data-table 配合远程分页：

const pagination = reactive({
  page: 1,
  pageSize: 15,
  itemCount: 0,
  showSizePicker: true,
  pageSizes: [10, 15, 30, 50],
});

#表单校验

用规则数组而不是模板字符串，便于复用：

const rules = {
  title: { required: true, message: '请输入标题', trigger: 'blur' },
  slug: { required: true, message: '请输入 slug', trigger: 'blur' },
};

#小结

后台的价值在于让内容生产足够快。先把文章与标签两条主线跑通，再谈看板与权限。

还没有评论，来说点什么吧。

Vue 3 + Naive UI 后台控制台实战：从 0 到可交付

#技术选型

#目录约定

#请求封装

#表格 + 分页

#表单校验

#小结

相关文章

用 SSE 做流式 AI 输出：先出字，而不是先转圈

Vue 3 组合式函数的组织方式：按能力切，不按组件切

AI 辅助编程的真实边界：我在哪些环节用它，哪些坚决不用

缓存不是"加一层"：静态站点该缓存什么、缓存多久

评论

发表评论