Holly UI 组件库

基于 Vue 3 的轻量级内部组件库，提供了一系列实用的基础组件和业务组件。

安装

# 使用 npm
npm install holly-npm

# 使用 yarn
yarn add holly-npm

# 使用 pnpm
pnpm add holly-npm

使用方式

全局注册（推荐）

import { createApp } from 'vue'
import App from './App.vue'
import hollynpm from 'hollynpm'

const app = createApp(App)
app.use(hollynpm)
app.mount('#app')

按需引入

import { allComponents } from 'holly-npm'
const { HollyButton, HollyInput } = allComponents

export default {
  components: {
    HollyButton,
    HollyInput
  }
}

组件列表

基础组件

组件库提供了一系列基础组件，位于 basic 目录下。

业务组件

业务相关的组件位于 business 目录下。

全局工具方法

组件库提供了一系列全局工具方法，可以通过 $utils 访问。

在组件中使用

// 选项式 API
export default {
  methods: {
    someMethod() {
      this.$utils.someUtilMethod()
    }
  }
}

// 组合式 API
import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const { proxy } = getCurrentInstance()
    
    const handleClick = () => {
      proxy.$utils.someUtilMethod()
    }
    return {
      handleClick
    }
  }
}

直接导入使用

import { utils, getModule } from 'holly-npm'
// 使用工具方法
utils.someMethod()
// 使用 getModule 方法
getModule('moduleName')

国际化

在组件中使用

// 选项式 API
export default {
  methods: {
    someMethod() {
      this.$tran('BTN_SAVE')
    }
  }
}

// 组合式 API
import { getCurrentInstance } from 'vue'
export default {
  setup() {
    const { proxy } = getCurrentInstance()
    const handleClick = () => {
      proxy.$tran('BTN_SAVE')
    }
    return {
      handleClick
    }
  }
}

在<setup> defineProps 中不能使用

defineProps 的配置会被编译到 setup() 函数外部，而 <script setup> 中的局部变量（如通过 getCurrentInstance() 获取的变量）只能在 setup() 内部访问，导致编译时引用失败

浏览器支持

• 支持所有现代浏览器
• 支持服务端渲染（SSR）
• 支持 CDN 引入

开发计划

• [ ] 添加更多基础组件
• [ ] 完善文档和示例
• [ ] 提供组件测试用例
• [ ] 优化打包体积

贡献指南

欢迎一起完善这个组件库。