vue dash

VueDash（Vue Nuxt.js 3 Tailwind CSS 管理仪表板模板）

使用Vue.js 、 Nuxt.js 3 、 NuxtUI和Tailwind CSS构建的现代、响应式且可自定义的管理仪表板模板。该模板非常适合构建功能强大的管理界面、仪表板和具有简洁设计的 Web 应用程序。

特征

• Nuxt.js 3 ：使用 Vue 3 组合 API 进行无缝服务器端渲染（SSR）和静态站点生成（SSG）。
• Tailwind CSS ：实用程序优先的 CSS 框架，用于快速、响应式的 UI 开发。
• 待办事项列表管理：内置对 CRUD 待办事项列表管理的支持
• 发票制作器：内置支持 CRUD，交互式发票制作器
• 可重用组件：模块化和可重用的 UI 组件，可轻松定制。
• 深色模式：内置支持浅色和深色主题。
• 响应式设计：针对所有屏幕尺寸进行全面优化。
• 动态路由：由 Nuxt.js 提供支持的灵活路由系统。
• 可扩展：轻松添加新页面、组件和插件。

？技术堆栈

• 前端框架：Vue.js 3（组合 API）
• 元框架：Nuxt.js 3
• 样式：Tailwind CSS
• UI组件库：NextUI
• 包管理器：pnpm

安装

1. 克隆存储库：

   git clone https://github.com/Kei-K23/vue-dash
   cd vue-dash

2. 安装依赖项：

   pnpm install
   # or
   npm install

3. 运行开发服务器：

   pnpm run dev
   # or
   npm run dev

4. 打开浏览器并导航到http://localhost:3000 。

---

文件结构

 admin-dashboard-template/
├── layouts/           # Layouts for the app
├── pages/             # Nuxt.js pages and routes
├── features/          # Organize logic, ui components and state into domain or feature
├── public/            # Static assets
├── nuxt.config.ts     # Nuxt.js configuration
└── tailwind.config.js # Tailwind CSS configuration

？路由和页面文档

路线	页面名称	描述
/	主页	管理仪表板的主要登陆页面。
/login	登录页面	允许用户登录并访问管理仪表板。
/register	注册页面	允许新用户创建帐户。
/contact	联系页面	显示一个表单，供用户寻求支持或询问。
/invoice	发票页	显示发票列表或财务记录详细信息。
/todo	都都应用程序页面	用于以待办事项列表格式管理和跟踪任务的页面。
/products	产品页面	用于管理产品信息的页面，包括详细信息和定价。
/order-lists	订单列表页面	列出所有客户订单，并提供查看和管理订单的选项。
/product-stock	产品库存页	显示当前库存水平和库存管理选项。
/settings	设置页面	允许用户管理系统设置和个人偏好。
/team	团队页面	展示团队成员、角色和权限管理选项。

？定制化

顺风 CSS

修改tailwind.config.js文件以自定义主题、扩展样式或添加插件。

成分

所有组件都位于features/(domain)/目录内的components/目录中。创建新组件或扩展现有组件以满足您的项目需求。

页面和路由

在pages/目录中添加或编辑文件以动态创建新路由。

？依赖关系

• 视图3
• Nuxt.js 3
• 顺风 CSS
• 努克斯图用户界面

文档

设置身份验证

您可以使用 Nuxt 的中间件和插件集成任何身份验证服务（例如 Firebase、Auth0 或自定义 JWT）。有关更多详细信息，请参阅 Nuxt.js 身份验证模块。

添加 API 集成

在pages/或composables/目录中使用Nuxt的服务器路由或外部API调用。在此处了解有关 Nuxt.js API 处理的更多信息。

？测试

单元测试

安装并配置 Vitest 以对 Vue 组件进行单元测试。

端到端测试

使用 Cypress 或 Playwright 进行端到端测试。

部署

1. 静态站点生成（SSG） ：

   pnpm run generate

   将生成的文件从dist/文件夹部署到静态托管提供商（例如 Netlify、Vercel）。

2. 服务器端渲染（SSR） ：

   pnpm run build
   pnpm run start

   将应用程序部署到 Node.js 托管（例如 AWS、Heroku 或 DigitalOcean）。

？支持

如果您遇到任何问题、有疑问或想要请求新功能或页面，请随时提出问题或联系 [email protected]。

？贡献

欢迎贡献！请按照以下步骤操作：

1. 分叉存储库。
2. 创建一个功能分支（ git checkout -b feature-name ）。
3. 提交您的更改（ git commit -m "Add feature" ）。
4. 推送到分支（ git push origin feature-name ）。
5. 打开拉取请求。

执照

该项目已获得 MIT 许可证的许可。

？致谢

• Vue.js
• Nuxt.js
• 努克斯图用户界面
• 顺风 CSS

页面预览

桌面视图

平板电脑视图

手机查看