aggregator_book

一个功能完整的聚合阅读应用 - 支持独立运行、npm集成和微前端架构的图书阅读模块，提供自动注册、启动器和完整的阅读体验。

📦 特性

• ✅ 单文件构建输出，优化加载性能
• ✅ 完整的TypeScript类型定义
• ✅ 支持独立运行和作为子包集成到壳应用
• ✅ 支持微前端环境（qiankun等）
• ✅ 路由动态注册和页面组件管理
• ✅ 环境自适应，自动检测运行模式
• ✅ CSS内联优化
• ✅ 自动注册功能，安装即可用
• ✅ 完整的启动器API
• ✅ 丰富的配置选项

🚀 安装

# 使用npm安装 (推荐版本 v1.0.4 及以上)
npm install aggregator_book@^1.0.4

# 使用yarn安装
yarn add aggregator_book@^1.0.4

# 使用pnpm安装
pnpm add aggregator_book@^1.0.4

🔄 更新历史

v1.0.4

• 🎉 实现单文件构建输出，优化加载性能
• ✨ 完善npm包配置，添加详细元数据
• 📝 更新API文档和使用示例
• 🔧 修复自动注册功能
• 🚀 优化构建配置

📚 使用方法

1. 作为Vue插件使用

// 在壳应用的main.js中
import Vue from 'vue';
import VueRouter from 'vue-router';
import { NovelSubpackage } from 'aggregator_book';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [] // 壳应用路由
});

// 安装子包作为Vue插件
Vue.use(NovelSubpackage, {
  router: router,
  routerBase: '/novel',
  // 其他配置选项
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

2. 作为路由模块集成

// 在壳应用中
import Vue from 'vue';
import VueRouter from 'vue-router';
import { createNovelSubpackage } from 'aggregator_book';

Vue.use(VueRouter);

// 创建子包实例
const novelSubpackage = createNovelSubpackage({
  routerBase: '/novel'
});

// 获取子包路由配置
const novelRoutes = novelSubpackage.getRoutes();

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    // 壳应用路由
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    },
    // 集成子包路由
    ...novelRoutes
  ]
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

4. 自动注册功能（v1.0.4新增）

从v1.0.4版本开始，聚合阅读应用提供了强大的自动注册功能，安装即可使用：

// 在项目中自动注册
import { registerApp } from 'aggregator_book';

// 基础注册
registerApp();

// 带配置的注册
registerApp({
  containerSelector: '.my-launcher-container', // 指定容器
  showInLauncher: true,                      // 在启动器中显示
  enableFloating: true,                      // 启用浮动图标
  position: { bottom: '20px', right: '20px' } // 浮动图标位置
});

5. 启动器使用（v1.0.4优化）

import { setupLauncher, createLauncher } from 'aggregator_book';

// 设置启动器配置
setupLauncher({
  defaultParams: {
    theme: 'light',
    fontSize: 16
  },
  launchConfig: {
    preload: true,
    timeout: 30000
  }
});

// 创建启动器实例
const launcher = createLauncher();

// 启动应用
async function launchNovelApp() {
  try {
    const app = await launcher.launch({
      routerBase: '/novel',
      theme: 'light'
    });
    console.log('应用启动成功', app);
  } catch (error) {
    console.error('应用启动失败', error);
  }
}

launchNovelApp();

### 6. 独立使用子包API

```javascript
import { createNovelSubpackage } from 'aggregator_book';

// 创建子包实例
const novelSubpackage = createNovelSubpackage();

// 初始化子包
novelSubpackage.init({
  // 配置选项
});

// 获取页面配置
const pages = novelSubpackage.getPages();

// 获取组件映射
const components = novelSubpackage.getComponents();

// 页面跳转
novelSubpackage.navigateTo('/pages/index/index', {
  param1: 'value1'
});

🛠️ API文档

NovelSubpackage 类

constructor(options?)

创建子包实例。

参数:

• options: 可选，初始化配置对象

init(options)

初始化子包。

参数:

• options: 配置对象，包含以下属性：
  • router: Vue Router实例（可选）
  • routerBase: 路由基础路径（可选）
  • apiConfig: API配置（可选）
  • themeConfig: 主题配置（可选）

返回值: 子包实例

getRoutes()

获取子包的路由配置。

返回值: 路由配置数组

getPages()

获取子包的页面配置。

返回值: 页面配置对象

getComponents()

获取子包的组件映射。

返回值: 组件映射对象，键为组件路径，值为组件工厂函数

install(Vue, options)

Vue插件安装方法。

参数:

• Vue: Vue构造函数
• options: 插件配置选项

navigateTo(path, params?)

页面跳转方法。

参数:

• path: 页面路径
• params: 查询参数（可选）

返回值: Promise

工具函数

createNovelSubpackage(options?)

创建子包实例的工厂函数。

参数:

• options: 初始化配置对象（可选）

返回值: NovelSubpackage实例

isStandalone()

检测是否在独立运行模式。

返回值: boolean

isInMicroFrontend()

检测是否在微前端环境运行。

返回值: boolean

isShellModule()

检测是否作为壳模块运行。

返回值: boolean

🔧 开发环境运行

独立运行模式

# 启动开发服务器（独立运行模式）
npm run serve:standalone

子包模式

# 启动开发服务器（子包模式）
npm run serve

构建生产版本

# 构建所有格式（UMD、ESM、类型定义）
npm run build

# 只构建UMD格式
npm run build:umd

# 只构建ESM格式
npm run build:es

# 只生成类型定义
npm run build:types

📋 环境检测

子包会自动检测当前运行环境，支持三种模式：

1. 独立运行模式: 直接通过npm run serve启动
2. 子包模式: 作为npm模块集成到壳应用
3. 微前端模式: 作为微应用运行在qiankun等框架中

🎯 配置选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | router | VueRouter | undefined | Vue Router实例 | | routerBase | string | '/' | 路由基础路径 | | apiConfig | object | {} | API配置对象 | | themeConfig | object | {} | 主题配置对象 | | userInfo | object | {} | 用户信息 | | debug | boolean | false | 调试模式 |

🔄 微前端环境适配

子包内置了对微前端环境的支持，可以在qiankun等微前端框架中作为微应用运行。

在qiankun中使用

// 壳应用配置
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'novel-app',
    entry: '//localhost:8081',
    container: '#novel-container',
    activeRule: '/novel',
    props: {
      // 传递给子包的属性
    }
  }
]);

start();

🧩 组件和页面

子包提供以下主要页面和组件：

主要页面

• /pages/index/index: 书城首页
• /pages/bookshelf/bookshelf: 我的书架
• /pages/bookDetail/bookDetail: 小说详情页
• /pages/reader/reader: 阅读器页面
• /pages/personal/personal: 个人中心

主要组件

• SearchBar: 搜索组件
• NovelList: 小说列表组件
• ChapterList: 章节列表组件
• ReadSetting: 阅读设置组件
• BookCover: 书籍封面组件

📱 响应式设计

子包采用响应式设计，支持不同屏幕尺寸的设备：

• 移动端（320px-767px）
• 平板端（768px-1023px）
• 桌面端（1024px+）

🎨 主题定制

子包支持主题定制，可以通过themeConfig配置自定义主题：

const novelSubpackage = createNovelSubpackage({
  themeConfig: {
    primaryColor: '#409EFF',
    secondaryColor: '#67C23A',
    backgroundColor: '#FFFFFF',
    textColor: '#303133',
    darkMode: false
  }
});

🚦 错误处理

子包内置了错误处理机制，可以通过以下方式监听错误：

// 全局错误监听
window.addEventListener('error', (error) => {
  console.error('novel-subpackage error:', error);
});

// 应用错误监听
app.config.errorHandler = (err, vm, info) => {
  console.error('novel-subpackage app error:', err, info);
};

📈 性能优化

子包采用以下性能优化策略：

1. 页面组件懒加载
2. 资源按需加载
3. CSS提取和优化
4. 图片懒加载
5. 代码分割

🔐 安全注意事项

1. 避免在子包中硬编码敏感信息
2. 遵循安全的跨域请求策略
3. 对用户输入进行验证和过滤
4. 注意XSS和CSRF防护

🤝 兼容性

• Vue 2.6.x+
• Vue Router 3.x+
• Vuex 3.x+
• 现代浏览器（Chrome, Firefox, Safari, Edge）
• IE 11需要额外的polyfill

📝 许可证

MIT

🛡️ 贡献指南

欢迎提交issue和pull request！

📬 问题反馈

如果您在使用过程中遇到问题，请在GitHub上提交issue，我们会尽快回复。