newhope-utils

一个实用的工具库，包含各种常用工具函数和组件。

功能列表

• [x] UUID生成
• [x] 数据校验
• [x] 文件处理
• [x] 水印功能
• [x] 远程动态加载组件 ✨ 新增

安装

npm install newhope-utils

使用

方式1：按需导入

import { UUID, validate, RemoteComponent } from 'newhope-utils'

方式2：导入所有

import * as utils from 'newhope-utils'

远程动态加载组件

介绍

RemoteComponent 是一个兼容Vue2和Vue3的远程动态加载组件，允许你从远程URL加载Vue组件并在应用中使用。

特性

• ✅ 兼容Vue2和Vue3
• ✅ 支持动态URL变更
• ✅ 支持传递属性
• ✅ 内置加载状态和错误处理
• ✅ 支持Vue组件的异步加载

使用方法

Vue3

<template>
  <div>
    <h1>远程组件示例</h1>
    <RemoteComponent 
      url="https://example.com/remote-component.js" 
      :props="{ message: 'Hello' }"
    />
  </div>
</template>

<script setup>
import { RemoteComponent } from 'newhope-utils'
</script>

Vue2

<template>
  <div>
    <h1>远程组件示例</h1>
    <RemoteComponent 
      url="https://example.com/remote-component.js" 
      :props="{ message: 'Hello' }"
    />
  </div>
</template>

<script>
import { RemoteComponent } from 'newhope-utils'

export default {
  components: {
    RemoteComponent
  }
}
</script>

API

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | url | String | 是 | 远程组件的URL地址 | | props | Object | 否 | 传递给远程组件的属性 |

事件

支持所有远程组件触发的事件，通过标准的Vue事件绑定方式使用。

本地测试

生成本地的npm包

npm link

链接到本地生成的npm包

npm link newhope-utils

发布npm

注意：发布npm前需修改package.json的 version 版本号

npm publish

开发

安装依赖

npm install

构建

npm run build

开发模式

npm run dev

依赖包管理

• 需要跟随下载的依赖包请放入package.json 的peerDependencies中
• 依赖包打包排除请放入vite.config.js 的externals中

License

MIT