vue amazing ui
1.0.0
Vue increíble interfaz de usuario
La biblioteca de componentes se implementa con [email protected] + [email protected] + [email protected] + [email protected] .
Actualmente, incluye 63 componentes básicos de UI y 16 funciones de utilidad, con exploración y actualizaciones continuas...
Es más, todos ellos se pueden sacudir.
Todo el contenido de Vue Amazing UI está escrito en TypeScript. Puede funcionar perfectamente con su proyecto mecanografiado.
Todos los componentes están integrados en estilo SFC de componente de archivo único y se pueden utilizar de forma independiente.
Listo para usar nada más sacarlo de la caja, sin problemas.
pnpm agregar vue-amazing-ui# ornpm instalar vue-amazing-ui# oryarn agregar vue-amazing-ui# orbun agregar vue-amazing-ui
Registro global Todos los componentes (no recomendado)
Sin sacudidas de árboles. El paquete tendrá códigos redundantes.
importar { createApp } desde 'vue'importar aplicación desde './App.vue'import VueAmazingUI desde 'vue-amazing-ui'import 'vue-amazing-ui/css'const app = createApp(App)app.use(VueAmazingUI )aplicación.mount('#aplicación')Registro Parcial Global
De esta forma, sólo se empaquetarán los componentes importados.
importar { createApp } desde 'vue'importar aplicación desde './App.vue'import { Botón, Etiqueta } desde 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import ' vue-amazing-ui/es/tag/Tag.css'const app = createApp(App)app.use(Button).use(Tag)app.mount('#app')Registro local
De esta forma, sólo se empaquetarán los componentes importados.
<script setup lang="ts">importar { Botón, Etiqueta } desde 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import 'vue-amazing-ui/es/tag /Etiqueta.css'</script>
<plantilla>
<Botón>botón</Botón>
<Etiqueta>etiqueta</Etiqueta>
</plantilla>Estilos de importación automática (recomendado)
Utilice el complemento vite-plugin-style-import para importar automáticamente estilos de componentes a pedido. El complemento analizará automáticamente los componentes utilizados en la plantilla e importará sus estilos.
pnpm agregar vite-plugin-style-import -D# ornpm install vite-plugin-style-import -D# oryarn agregar vite-plugin-style-import -D# orbun agregar vite-plugin-style-import -D
// vite.config.tsimport { defineConfig } de 'vite'import vue de '@vitejs/plugin-vue'import { createStyleImportPlugin } de 'vite-plugin-style-import'// Importar automáticamente el componente styleimport { VueAmazingUIStyleResolve } de ' vue-amazing-ui'// https://vitejs.dev/config/export default defineConfig({
complementos: [vue(),// importa estilos de biblioteca de componentes a pedidocreateStyleImportPlugin({ resuelve:[VueAmazingUIStyleResolve() ]})
]}) Luego, puede usar todos los componentes de vue-amazing-ui en su código sin necesidad de importar manualmente los estilos de los componentes, ya sea que esté usando el registro parcial global o el registro local.
Registro Parcial Global
importar {createApp} desde 'vue'importa la aplicación desde './App.vue'import {Botón, Etiqueta} desde 'vue-amazing-ui'const app = createApp(App)app.use(Button).use(Etiqueta) aplicación.mount('#aplicación')Registro local
<script setup lang="ts">importar {Botón, Etiqueta} desde 'vue-amazing-ui'</script>
<plantilla>
<Botón>botón</Botón>
<Etiqueta>etiqueta</Etiqueta>
</plantilla>Importación automática bajo demanda (muy recomendable)
Utilice el complemento unplugin-vue-components para importar componentes automáticamente a pedido. El complemento analizará automáticamente los componentes utilizados en la plantilla e importará los componentes y estilos.
pnpm agregar unplugin-vue-components -D# ornpm instalar unplugin-vue-components -D# oryarn agregar unplugin-vue-components -D# orbun agregar unplugin-vue-components -D
// vite.config.tsimport { defineConfig } de 'vite'import vue de '@vitejs/plugin-vue'import Componentes de 'unplugin-vue-components/vite'// vue-amazing-ui on-demand importimport { VueAmazingUIResolver } de 'vue-amazing-ui'// https://vitejs.dev/config/export default defineConfig({
complementos: [vue(),Components({ solucionadores: [// componentes de importación automática desde VueAmazingUIVueAmazingUIResolver() ]})
]}) Luego, puedes usar directamente todos los componentes de vue-amazing-ui en tu código.
<plantilla> <Botón>botón</Botón> <Etiqueta>etiqueta</Etiqueta> </plantilla>
Todos los tipos se pueden importar y utilizar directamente desde vue-amazing-ui sin ninguna instalación adicional.
<script setup lang="ts">tipo de importación { ButtonProps } de 'vue-amazing-ui'const forma = ref<ButtonProps['shape']>('default')</script>
<plantilla>
<Botón :forma="forma">botón</Botón>
</plantilla> <script setup lang="ts">importar {dateFormat, formatNumber, rafTimeout, cancelRaf, acelerar, eliminar rebotes, agregar, descargar archivos, toggleDark, useEventListener, useMutationObserver, useScroll, useFps, useMediaQuery, useResizeObserver, useSlotsExist} de 'vue-amazing-ui '</script>Obtener el código del proyecto
clon de git https://github.com/themusecatcher/vue-amazing-ui.git
Instalar dependencias
cd vue-amazing-ui pnpm yo
Ejecutar proyecto
desarrollador pnpm
Mis blogs de CSDN
| Nombre | Descripción | Nombre | Descripción |
|---|---|---|---|
| Alerta | 警告提示 | Avatar | 头像 |
| AtrásArriba | 回到顶部 | Insignia | 徽标 |
| Migaja de pan | 面包屑 | Botón | 按钮 |
| Tarjeta | 卡片 | Carrusel | 轮播图 |
| cascada | 级联选择 | Caja | 复选框 |
| Colapsar | 折叠面板 | Cuenta atrás | 倒计时 |
| Selector de fecha | 日期选择 | Descripciones | 描述列表 |
| Diálogo | 对话框 | Divisor | 分割线 |
| Cajón | 抽屉 | Elipsis | 文本省略 |
| Vacío | 空状态 | Doblar | 弹性布局 |
| Botón flotante | 浮动按钮 | Texto degradado | 渐变文字 |
| Red | 栅格 | Imagen | foto |
| Aporte | 输入框 | Número de entrada | 数字输入框 |
| EntradaBuscar | 搜索框 | Lista | 列表 |
| Barra de carga | 加载条 | Mensaje | 全局提示 |
| Modal | 模态框 | Notificación | 通知提醒 |
| NúmeroAnimación | 数值动画 | Paginación | 分页 |
| Popconfirmar | 弹出确认 | popover | 气泡卡fotos |
| Progreso | 进度条 | Código QR | 二维码 |
| Radio | 单选框 | Tasa | 评分 |
| Resultado | 结果 | Barra de desplazamiento | 滚动条 |
| Segmentario | 分段控制器 | Seleccionar | 选择器 |
| Esqueleto | 骨架屏 | control deslizante | 滑动输入条 |
| Espacio | 间距 | Girar | 加载中 |
| Estadística | 统计数值 | Pasos | 步骤条 |
| deslizador | 触摸滑动插件 | Cambiar | 开关 |
| Mesa | 表格 | Cortina a la italiana | 标签页 |
| Etiqueta | 标签 | área de texto | 文本域 |
| Desplazamiento de texto | 文字滚动 | Línea de tiempo | 时间轴 |
| Información sobre herramientas | 文字提示 | Subir | 上传 |
| Video | 播放器 | Cascada | 瀑布流 |
| Filigrana | 水印 |
| Nombre | Descripción | Tipo |
|---|---|---|
| formato de fecha | Formatear la función de cadena de fecha y hora | (valor: número | cadena | Fecha = Fecha.ahora(), formato: cadena = 'AAAA-MM-DD HH:mm:ss') => cadena |
| formatoNúmero | Función de formato de números | (valor: número | cadena, precisión: número = 2, separador: cadena = ',', decimal: cadena = '.', ¿prefijo?: cadena, ¿sufijo?: cadena) => cadena |
| rafTiempo de espera | Función para implementar setTimeout o setInterval usando requestAnimationFrame | (fn: Función, retraso: número = 0, intervalo: booleano = falso) => objeto |
| cancelarRaf | Función para cancelar la función rafTimeout | (raf: { id: número }) => nulo |
| acelerador | Función de acelerador | (fn: Función, retardo: número = 300) => cualquiera |
| rebote | Función antirrebote | (fn: Función, retardo: número = 300) => cualquiera |
| agregar | Función de suma que elimina problemas de precisión en la aritmética de JavaScript | (núm1: número, núm2: número) => número |
| descargar archivo | Función para descargar un archivo con un nombre de archivo personalizado; si no se proporciona ningún nombre, extrae el nombre del archivo de la URL | (url: cadena, nombre de archivo?: cadena) => vacío |
| alternarOscuro | Función para alternar el modo oscuro | () => nulo |
| utilizarEventListener | Función para agregar y eliminar detectores de eventos usando ganchos del ciclo de vida de Vue | (destino: HTMLElement | Ventana | Documento, evento: cadena, devolución de llamada: Función) => void |
| utilizarMutationObserver | Función para observar cambios en elementos DOM usando MutationObserver | (destino: Ref | Ref[] | HTMLElement | HTMLElement[], devolución de llamada: MutationCallback, opciones = {}) => objeto |
| utilizarDesplazarse | Función para monitorear la posición de desplazamiento y el estado de un elemento de destino en tiempo real | (destino: Ref | HTMLElement | Ventana | Documento = ventana, throttleDelay: número = 0, onScroll?: (e: Evento) => void, onStop?: (e: Evento) => void) => objeto |
| utilizar Fps | Función para monitorear la frecuencia de actualización (FPS) del navegador en tiempo real | () => objeto |
| utilizarMediaQuery | Función para determinar si el entorno actual coincide con una condición de consulta de medios especificada | (mediaQuery: cadena) => objeto |
| utilizarResizeObserver | Función para observar cambios en las dimensiones de elementos DOM usando ResizeObserver | (destino: Ref | Ref[] | HTMLElement | HTMLElement[], devolución de llamada: ResizeObserverCallback, opciones = {}) => objeto |
| utilizarSlotsExist | Función para vigilar la existencia de tragamonedas con nombres de pila, que admitan tragamonedas individuales o una serie de tragamonedas. | (slotsName: cadena | cadena[] = 'predeterminado') => Reactivo | Ref<booleano> |
