快速开始

我们推荐在Vue3工程化项目中使用需要自定义配置的三方插件统一创建plugins目录分区管理，从而分担main.ts的代码量压力。

安装

# 支持pnpm/yarn/cnpm/npm，推荐使用pnpm
$ pnpm i wyfe-ivue

推荐用法

1.1、创建plugins/modules/WyfeIVue.ts：

import { type App } from 'vue'

import 'wyfe-ivue/dist/wyfe-ivue.css'
import * as WyfeIVue from 'wyfe-ivue'

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

// 如需使用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')

export default (app: App) => {
  for (const [key, component] of Object.entries(WyfeIVue)) {
    key.startsWith('Use') && app.component(key, component)
  }
}

1.2、创建plugins/index.ts：

import { type App } from 'vue'

const modules: Record<string, any> = import.meta.glob('./modules/*.ts', {
  eager: true
})

const plugins: Record<string, any> = {}
for (const key in modules) {
  plugins[
    (key.split('/')[key.split('/').length - 1] as any).split('.')[0] as any
  ] = modules[key].default
}

export default (app: App) => {
  Object.keys(plugins).forEach(key => {
    plugins[key](app)
  })
}

2、在main.ts中引入使用：

import plugins from './plugins'

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

3、在页面中使用(以使用UseElButton为例)：

<script setup lang="ts">
  const handleBtnClick = () => {
    console.log('按钮被点击了')
  }
</script>

<template>
  <UseElButton btnText="保存" @onClick="handleBtnClick"/>
</template>

特别说明

1、为提供一致的使用体验，本组件库组件皆以Use开头。

2、本组件库中以UseEl开头的组件皆为对ElementPlus组件的二次封装，因此除本组件库组件提供的特有API外，其它API与ElementPlus完全保持一致，在减少使用心智负担的同时最大程度提升开发效率和编码效率！