简介

1. 项目概述

本项目旨在为开发者提供一套高效、稳定且易于使用的API接口，以支持各种应用场景下的数据交互和服务调用。通过集成现代前端技术栈（如 Vue 3、Vite、Pinia、Vue Router 和 Naive UI），我们确保了项目的高性能和易维护性。

2. 技术栈

• 前端框架：Vue 3
• 构建工具：Vite
• 状态管理：Pinia
• 路由管理：Vue Router
• UI 组件库：Naive UI
• 类型检查：TypeScript

3. 主要特性

3.1 轻量级架构

采用 Vue 3 + Vite 的组合，使得项目启动速度快，开发体验流畅。同时，结合 Pinia 和 Vue Router 实现了高效的状态管理和路由控制。

3.2 TypeScript 支持

全面支持 TypeScript，增强了代码的类型安全性，减少了运行时错误的发生概率，并提高了代码的可读性和可维护性。

3.3 常用组件封装

提供了多种常用组件的封装，如 DataTable、Form、Drawer、Modal、Message 等，简化了开发流程，提升了开发效率。

3.4 响应式设计

支持多种设备和屏幕尺寸，确保在不同终端上都有良好的用户体验，适应移动设备和桌面浏览器。

3.5 完善的错误处理机制

提供详细的错误码说明和异常处理指南，帮助开发者快速定位和解决问题，提升系统的稳定性和可靠性。

4. 使用场景

本项目适用于需要高效数据交互和灵活服务调用的各种应用场景，包括但不限于：

• 用户管理系统
• 订单处理系统
• 商品信息展示平台

5. 项目结构

admin/
├── node_modules/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ └── logo.png
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── router/
│ │ └── index.ts
│ ├── store/
│ │ └── index.ts
│ ├── views/
│ │ └── Home.vue
│ ├── App.vue
│ └── main.ts
├── .eslintrc.cjs
├── .gitignore
├── .prettierrc
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

6. 入口文件

引入使用pinia、naive-ui、vue-router等，配置了naive-ui的默认主题中的主题色。

import './assets/main.css';

import { createApp, computed } from 'vue';
import { createPinia } from 'pinia';
import { useThemeInfoStore } from '@/stores/themeInfo';
import { darkTheme } from 'naive-ui';

import App from './App.vue';
import router from './router';
import { createDiscreteApi } from 'naive-ui';

const app = createApp(App);
app.use(createPinia());
app.use(router);

const themeStore = useThemeInfoStore();
const configProviderProps = computed(() => {
  const { themeMode, primaryColor, primaryColorHover, primaryColorPressed, primaryColorSuppl } = themeStore.themeInfo;
  return {
    theme: themeMode === 'dark' ? darkTheme : null,
    themeOverrides: {
      common: {
        primaryColor,
        primaryColorHover,
        primaryColorPressed,
        primaryColorSuppl,
      },
    },
  };
});
//https://www.naiveui.com/zh-CN/light/components/discrete，将弹窗等组件单独提取出来，挂到window上全局可用
const discreteApi = createDiscreteApi(['message', 'loadingBar', 'dialog'], { configProviderProps: configProviderProps });
window.$message = discreteApi.message;
window.$loadingBar = discreteApi.loadingBar;
window.$dialog = discreteApi.dialog;

app.mount('#app');