快速开始

我们推荐在 Vue3 工程化项目中新建 plugins 目录，统一存放需自定义配置的第三方插件，拆分逻辑以精简 main.ts。

安装

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

推荐用法

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

import { type App } from 'vue'

import '@wyfex/ivue/dist/ivue.css'
import * as WyfeXIVue from '@wyfex/ivue'

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

// 如需使用UseIconfont组件需要手动引入iconfont图标链接地址
import { dynamicLoadFile } from '@wyfex/iutils'
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(WyfeXIVue)) {
    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="保存" @click="handleBtnClick"/>
</template>

特别说明

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

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