开始
由于该项目并不是一个纯前端项目, 未为其编写 mock 数据，因此需要你到 Supabase 注册一个账号，并创建一个项目，然后将项目的配置信息填写到项目中。
下文便会告诉你该如何进行配置
- 下载项目:
git clone https://github.com/kuizuo/nuxt-naive-admin
cd nuxt-naive-admin- 安装相关依赖:
npm
npm install- 配置 Supabase:
首先你需要到 Supabase 注册一个账号，并创建一个项目，然后将项目的配置信息填写到项目中 supabase/config.toml 文件。
执行以下命令来启动本地 Supabase docker 实例
npx supabase start将 .env.example 文件复制并重命名为 .env。现在将你在运行 supabase start 时得到的凭据复制到此文件中。
- 运行
dev命令来启动项目:
npm
npm run dev✨ 很好! 你已经成功启动了项目，现在你可以在浏览器中访问 http://localhost:8010 来查看效果
你可以在 Stackblitz 中在线体验:
Play on StackBlitz目录结构
nuxt-naive-admin
├── assets # 前端静态资源文件
├── components # 组件
├── composables # 组合式API
├── docs # docus 文档
├── layouts # 布局
│ ├── admin.vue # 管理端布局
│ └── default.vue # 默认布局
├── middleware # 中间件
├── pages # 页面
│ ├── admin # 管理端页面
│ ├── auth # 身份验证页面
│ ├── index.vue # 客户端页面
├── public # 服务端静态资源文件
├── server # 服务端文件
│ ├── api # 接口服务
│ └── middleware # 接口中间件
├── stores # pinia 状态管理
├── types # 类型定义
├── utils # 工具函数
├── ecosystem.config.js # pm2 配置文件
├── app.vue # 入口文件
├── app.config.ts # 应用配置文件
├── nuxt.config.ts # nuxt 配置文件
|-- .env # 环境变量
└── package.json # 依赖包从这个项目的目录结构中其实就可以看出，本项目是集成了全栈能力，并且使用 Vue 与 Node 来编写前端与后端，并不会产生前后端分离的分割感，只需要打开一个项目即可开始工作。这得益于Nuxt3 与 Nitro。
项目开发说明
本项目相当于客户端页面(page/index)与管理端页面(page/admin)相结合。