wyfe-ivue

基于 Vite7 + Vue3 + Typescript5 + ElementPlus2 构建的以配置驱动视图高性能组件库

文档地址

https://wyfe.top/ivue

npm下载(支持pnpm/yarn/cnpm/npm)

$ pnpm i wyfe-ivue

使用(仅需3步配置即刻上手)

/**
 * 1、创建plugins/WyfeIVue.ts：
 */

// 如需使用UseSvgIcon组件需要手动引入svg图标注册脚本 并且需在vite.config.ts中配置插件
import 'virtual:svg-icons-register'

import { type App, type Component } from 'vue'
import 'wyfe-ivue/dist/wyfe-ivue.css'
import * as WyfeIVue from 'wyfe-ivue'

// 如需使用UseIconfont组件需要手动引入iconfont图标链接地址
import { dynamicLoadFile } from '@/utils'
import { getConfig } from '@/config'

// 引入iconfont font图标
dynamicLoadFile(getConfig('ICONFONT_URL.FONT'))
// 引入iconfont symbol图标
dynamicLoadFile(getConfig('ICONFONT_URL.SYMBOL'), 'js')

type ComponentExports = {
  [K in keyof typeof WyfeIVue]: (typeof WyfeIVue)[K] extends Component
    ? (typeof WyfeIVue)[K]
    : never
}

export default (app: App) => {
  const components = WyfeIVue as ComponentExports

  for (const [key, component] of Object.entries(components)) {
    key.startsWith('Use') && app.component(key, component)
  }
}


/**
 * 2、在main.ts中引入使用：
 */
import  WyfeIVuePlugins from './plugins/WyfeIVue'

createApp(App).use(WyfeIVuePlugins).mount('#app')

/**
 * 3、在页面中使用(以使用UseElButton为例)：
 */
<UseElButton btnText="保存" @onClick="handleClick"/>

本地构建

1. 生成 tgz 包

$ cd wyfe-ivue
$ pnpm tgz
# 生成 wyfe-ivue-0.0.1.tgz

2. 在目标项目中安装和使用

$ cd targetProject
$ pnpm i D:/xxx/wyfe-ivue/wyfe-ivue-0.0.1.tgz

版本号规则

• 仅升级组件库依赖，修改第1位。eg：1.x.x；
• 仅新增组件库组件，修改第2位。eg：x.8.x；
• 仅修复、优化现有组件库组件，修改第3位。eg：x.x.1；
• 以上3项都有变更或部分有变更则按照对应变更修改对应版本号位置；
• 当对第1、2项有变更且上个版本第3位不为0时，需将第3位置为0。