vue amazing ui

Interface de usuário incrível do Vue

Documentação

Interface de usuário incrível do Vue

Características

• A biblioteca de componentes é implementada com [email protected] + [email protected] + [email protected] + [email protected] .

• Atualmente, inclui 63 componentes básicos de UI e 16 funções utilitárias, com exploração contínua e atualizações contínuas...

• Além do mais, todos eles podem ser abalados em árvores.

• Todo o material do Vue Amazing UI é escrito em TypeScript. Ele pode funcionar perfeitamente com seu projeto TypeScript.

• Todos os componentes são construídos no estilo SFC de componente de arquivo único e podem ser usados ​​de forma independente.

• Pronto para usar fora da caixa, sem complicações.

Instalação

 pnpm add vue-amazing-ui# ornpm install vue-amazing-ui# oryarn add vue-amazing-ui# orbun add vue-amazing-ui

Usar componentes

Registro global de todos os componentes (não recomendado)

Sem sacudir as árvores. O pacote terá códigos redundantes.

 import { createApp } from 'vue'import App from './App.vue'import VueAmazingUI from 'vue-amazing-ui'import 'vue-amazing-ui/css'const app = createApp(App)app.use(VueAmazingUI )app.mount('#app')

Registro Parcial Global

Neste formulário, apenas os componentes importados serão agrupados.

 import { createApp } from 'vue'import App from './App.vue'import { Button, Tag } from '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

Neste formulário, apenas os componentes importados serão agrupados.

 <script setup lang="ts">importar {Botão, Tag} de 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import 'vue-amazing-ui/es/tag /Tag.css'</script>
<modelo>
  <Button>botão</Button>
  <Tag>etiqueta</Tag>
</template>

Estilos de importação automática (recomendado)

Use o plugin vite-plugin-style-import para importar automaticamente estilos de componentes sob demanda. O plugin analisará automaticamente os componentes usados ​​no modelo e importará seus estilos.

 pnpm adicionar vite-plugin-style-import -D# ornpm instalar vite-plugin-style-import -D# oryarn adicionar vite-plugin-style-import -D# orbun adicionar vite-plugin-style-import -D

 // vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { createStyleImportPlugin } from 'vite-plugin-style-import' // Importar automaticamente o componente stylesimport { VueAmazingUIStyleResolve } from ' vue-amazing-ui'// https://vitejs.dev/config/export padrão defineConfig({
  plugins: [vue(),// importa estilos de biblioteca de componentes em demandcreateStyleImportPlugin({ resolve:[VueAmazingUIStyleResolve() ]})
  ]})

Então, você pode usar todos os componentes do vue-amazing-ui em seu código sem precisar importar manualmente os estilos dos componentes, esteja você usando registro parcial global ou registro local.

• Registro Parcial Global

   importar {createApp} de 'vue'importar aplicativo de './App.vue'import {Botão, Tag} de 'vue-amazing-ui'const app = createApp(App)app.use(Button).use(Tag) app.mount('#app')

• Registro local

   <script setup lang="ts">importar {Botão, Tag} de 'vue-amazing-ui'</script>
  <modelo>
    <Button>botão</Button>
    <Tag>etiqueta</Tag>
  </template>

Importação automática sob demanda (altamente recomendada)

Use o plugin unplugin-vue-components para importar componentes automaticamente sob demanda. O plugin analisará automaticamente os componentes usados ​​no modelo e importará os componentes e estilos.

 pnpm adicionar unplugin-vue-components -D# ornpm instalar unplugin-vue-components -D# oryarn adicionar unplugin-vue-components -D# orbun adicionar 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 importimport sob demanda { VueAmazingUIResolver } de 'vue-amazing-ui'// https://vitejs.dev/config/export default defineConfig({
  plugins: [vue(),Components({ resolvedores: [// importar automaticamente componentes de VueAmazingUIVueAmazingUIResolver() ]})
  ]})

Então, você pode usar diretamente todos os componentes do vue-amazing-ui em seu código.

 <modelo>
  <Button>botão</Button>
  <Tag>etiqueta</Tag>
</template>

Usar tipos

Todos os tipos podem ser importados diretamente e usados ​​do vue-amazing-ui sem qualquer instalação adicional.

 <script setup lang="ts">importar tipo { ButtonProps } de 'vue-amazing-ui'const shape = ref<ButtonProps['shape']>('default')</script>
<modelo>
  <Button :shape="shape">botão</Button>
</template>

Usar funções

 <script setup lang="ts">importar { dateFormat, formatNumber, rafTimeout, cancelRaf, acelerador, debounce, add, downloadFile, toggleDark, useEventListener, useMutationObserver, useScroll, useFps, useMediaQuery, useResizeObserver, useSlotsExist} de 'vue-amazing-ui '</script>

Projeto

• Obtenha o código do projeto

 clone do git https://github.com/themusecatcher/vue-amazing-ui.git

• Instalar dependências

 cd vue-amazing-ui

pnpm eu

• Executar projeto

 desenvolvedor pnpm

Blogues

Meus blogs CSDN

Componentes

Nome	Descrição	Nome	Descrição
Alerta	警告提示	avatar	头像
Parte traseira	回到顶部	Distintivo	徽标
Pão ralado	面包屑	Botão	按钮
Cartão	foto	Carrossel	轮播图
Cascata	级联选择	Caixa de seleção	复选框
Colapso	折叠面板	Contagem regressiva	倒计时
Selecionador de data	日期选择	Descrições	描述列表
Diálogo	对话框	Divisor	分割线
Gaveta	抽屉	Reticências	文本省略
Vazio	空状态	Flexível	弹性布局
Botão flutuante	浮动按钮	Texto Gradiente	渐变文字
Grade	栅格	Imagem	foto
Entrada	输入框	Número de entrada	数字输入框
Pesquisa de entrada	搜索框	Lista	列表
Barra de carregamento	加载条	Mensagem	全局提示
Modal	模态框	Notificação	通知提醒
NúmeroAnimação	数值动画	Paginação	分页
Popconfirmar	弹出确认	Popover	气泡卡 foto
Progresso	进度条	Código QR	二维码
Rádio	单选框	Avaliar	评分
Resultado	结果	Barra de rolagem	滚动条
Segmentado	分段控制器	Selecione	选择器
Esqueleto	骨架屏	Controle deslizante	滑动输入条
Espaço	间距	Rodar	加载中
Estatística	统计数值	Passos	步骤条
Deslizante	触摸滑动插件	Trocar	开关
Mesa	表格	Guias	标签页
Marcação	标签	Área de texto	文本域
Rolagem de Texto	文字滚动	Linha do tempo	时间轴
Dica	文字提示	Carregar	上传
Vídeo	播放器	Cachoeira	瀑布流
Marca d'água	水印

Funções

Nome	Descrição	Tipo
formato de data	Formatar função de string de data e hora	(valor: número | string | Data = Data.now(), formato: string = 'AAAA-MM-DD HH:mm:ss') => string
formatoNúmero	Função de formatação de números	(valor: número | string, precisão: número = 2, separador: string = ',', decimal: string = '.', prefixo?: string, sufixo?: string) => string
rafTimeout	Função para implementar setTimeout ou setInterval usando requestAnimationFrame	(fn: Função, atraso: número = 0, intervalo: booleano = falso) => objeto
cancelarRaf	Função para cancelar a função rafTimeout	(raf: { id: número }) => vazio
acelerador	Função acelerador	(fn: Função, atraso: número = 300) => qualquer
rebater	Função de rejeição	(fn: Função, atraso: número = 300) => qualquer
adicionar	Função de adição que elimina problemas de precisão na aritmética JavaScript	(num1: número, num2: número) => número
baixar arquivo	Função para baixar um arquivo com nome personalizado; se nenhum nome for fornecido, ele extrai o nome do arquivo da URL	(url: string, nome do arquivo?: string) => void
alternarEscuro	Função para alternar o modo escuro	() => nulo
useEventListener	Função para adicionar e remover ouvintes de eventos usando ganchos de ciclo de vida Vue	(destino: HTMLElement | Janela | Documento, evento: string, retorno de chamada: Função) => void
useMutationObserver	Função para observar mudanças em elementos DOM usando MutationObserver	(destino: Ref | Ref[] | HTMLElement | HTMLElement[], retorno de chamada: MutationCallback, opções = {}) => objeto
useScroll	Função para monitorar a posição de rolagem e o estado de um elemento de destino em tempo real	(destino: Ref | HTMLElement | Janela | Documento = janela, aceleradorDelay: número = 0, onScroll?: (e: Evento) => void, onStop?: (e: Evento) => void) => objeto
usarFps	Função para monitorar a taxa de atualização (FPS) do navegador em tempo real	() => objeto
usarMediaQuery	Função para determinar se o ambiente atual corresponde a uma condição de consulta de mídia especificada	(mediaQuery: string) => objeto
useResizeObserver	Função para observar mudanças nas dimensões dos elementos DOM usando ResizeObserver	(destino: Ref | Ref[] | HTMLElement | HTMLElement[], retorno de chamada: ResizeObserverCallback, opções = {}) => objeto
useSlotsExist	Função para observar a existência de slots com nomes próprios, suportando slots únicos ou uma série de slots	(slotsName: string | string[] = 'default') => Reativo | Ref<booleano>