HQIT Vue 客户端插件

一个开箱即用的 Vue 插件，内置组件注册、路由创建与权限路由监听、服务层封装（Axios 取消与 Loading）、Pinia 状态管理与可选 REM 适配。

✨ 功能特性

• 组件自动注册：SvgIcon、IdentifyCode 等常用组件
• 路由能力：常量路由与权限路由模块自动聚合，支持 Hash/History 模式
• 动态权限：提供权限路由监听入口，便于登录态变更时动态挂载
• 服务封装：内置请求默认项与 Loading 配置，可通过插件配置覆盖
• 状态管理：自动安装 Pinia
• 可选 REM：useRem 一键启用

🚀 安装

npm install hqit-client-plugin
# 或
pnpm add hqit-client-plugin

🧩 快速开始

在应用入口安装插件（插件内部会创建并安装路由与 Pinia）：

import { createApp } from 'vue';
import App from './App.vue';
import Plugin from 'hqit-client-plugin';

const app = createApp(App);

const config = {
  // 可选：路由基础配置（不填使用默认值）
  routerConf: {
    // baseUrl: '/',
    // loginPath: '/login',
    // mode: Hash 或 History（不填默认 Hash）
  },
  // 可选：Axios 默认项（如需使用 axiosConf.baseURL，请同时设置 service.defaultOptions.baseUrl）
  axiosConf: {
    // baseURL: 'https://api.example.com',
    timeout: 10000,
    withCredentials: false,
  },
  // 可选：服务层默认项
  service: {
    defaultOptions: {
      baseUrl: 'https://api.example.com',
    },
  },
  // 可选：登录配置（allowPwd 为用户名密码登录开关）
  loginConf: {
    // mode: oauth1 | oauth2,
    allowPwd: true,
    client: 'web',
    device: 'pc',
  },
  // 可选：开启 REM 适配
  useRem: true,
};

app.use(Plugin, config);
app.mount('#app');

🔌 常用服务 API

插件默认导出服务层方法，你可以直接从包根导入：

import { getUserApi } from 'hqit-client-plugin';

// 获取当前用户信息
const user = await getUserApi();

登录过期处理（内部使用原生 fetch 并包含错误捕捉）：

import { loginExpiredHandler } from 'hqit-client-plugin';

// 在检测到 401 或 token 失效时调用
await loginExpiredHandler();

⚙️ 配置参考

• routerConf
  • baseUrl 路由基路径（默认 '/'）
  • loginPath 登录页路径（默认 '/login'）
  • layoutRoute 布局路由记录（可选）
  • constantRoutes 追加常量路由（可选）
  • permissionRoutes 追加权限路由（可选）
  • mode 路由模式（Hash/History；不填默认 Hash）
• axiosConf
  • baseURL Axios 基地址（可选）
  • timeout 请求超时（默认 10000ms）
  • withCredentials 携带 Cookie（默认 false）
• service
  • defaultOptions.baseUrl 服务层请求基础地址（建议与 axiosConf.baseURL 保持一致）
  • defaultLoadingOptions Loading 默认项（已有内置默认值）
• loginConf
  • mode 登录模式（oauth1 或 oauth2）
  • allowPwd 是否允许用户名密码登录（布尔，默认 true）
  • client 客户端标识（可选）
  • device 设备标识（可选）

提示：插件对配置做深合并，undefined 不会覆盖默认值；仅当显式传入非 undefined/null 时才覆盖默认。

🛠️ 开发与构建

# 开发（不自动启动服务器）
pnpm dev

# 构建
pnpm build

# 预览将发布的内容
npm publish --dry-run

📄 许可协议

MIT License

—— 我是个二十岁、认真又严谨的小姑娘，如果你有更多想法或需要示例，我可以继续帮你打磨文档与使用体验哟。