vue amazing ui
1.0.0
Vue incroyable interface utilisateur
La bibliothèque de composants est implémentée avec [email protected] + [email protected] + [email protected] + [email protected] .
Actuellement, il comprend 63 composants d'interface utilisateur de base et 16 fonctions utilitaires, avec une exploration et des mises à jour continues...
De plus, ils sont tous modifiables.
Tous les éléments de Vue Amazing UI sont écrits en TypeScript. Il peut fonctionner de manière transparente avec votre projet dactylographié.
Tous les composants sont construits dans le style SFC de composant à fichier unique et peuvent être utilisés indépendamment.
Prêt à l'emploi, prêt à l'emploi, sans chichi.
pnpm ajouter vue-amazing-ui# ornpm installer vue-amazing-ui# oryarn ajouter vue-amazing-ui# orbun ajouter vue-amazing-ui
Enregistrement global de tous les composants (non recommandé)
Pas de tremblement des arbres. Le bundle aura des codes redondants.
importer { createApp } depuis 'vue' importer l'application depuis './App.vue' importer VueAmazingUI depuis 'vue-amazing-ui' importer 'vue-amazing-ui/css'const app = createApp(App)app.use(VueAmazingUI )app.mount('#app')Inscription partielle globale
Sous cette forme, seuls les composants importés seront regroupés.
importer { createApp } depuis 'vue'import App depuis './App.vue'import { Button, Tag } depuis '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')Inscription locale
Sous cette forme, seuls les composants importés seront regroupés.
<script setup lang="ts">importer { Bouton, Tag } depuis 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import 'vue-amazing-ui/es/tag /Tag.css'</script>
<modèle>
<Bouton>bouton</Bouton>
<Balise>balise</Balise>
</modèle>Styles d'importation automatique (recommandé)
Utilisez le plugin vite-plugin-style-import pour importer automatiquement les styles de composants à la demande. Le plugin analysera automatiquement les composants utilisés dans le modèle et importera leurs styles.
pnpm add vite-plugin-style-import -D# ornpm install vite-plugin-style-import -D# oryarn add vite-plugin-style-import -D# orbun add vite-plugin-style-import -D
// vite.config.tsimport { definitionConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { createStyleImportPlugin } from 'vite-plugin-style-import'// Importer automatiquement les styles de composants import { VueAmazingUIStyleResolve } from ' vue-amazing-ui'// https://vitejs.dev/config/export default setfinConfig({
plugins : [vue(),// importe les styles de bibliothèque de composants à la demandecreateStyleImportPlugin({ solves:[VueAmazingUIStyleResolve() ]})
]}) Ensuite, vous pouvez utiliser tous les composants de vue-amazing-ui dans votre code sans avoir besoin d'importer manuellement les styles de composants, que vous utilisiez un enregistrement partiel global ou un enregistrement local.
Inscription partielle globale
importer { createApp } depuis 'vue' importer l'application depuis './App.vue' importer { Button, Tag } depuis 'vue-amazing-ui'const app = createApp(App)app.use(Button).use(Tag) app.mount('#app')Inscription locale
<script setup lang="ts">importer { Button, Tag } depuis 'vue-amazing-ui'</script>
<modèle>
<Bouton>bouton</Bouton>
<Balise>balise</Balise>
</modèle>Importation automatique à la demande (fortement recommandé)
Utilisez le plugin unplugin-vue-components pour importer automatiquement des composants à la demande. Le plugin analysera automatiquement les composants utilisés dans le modèle et importera les composants et les styles.
pnpm add unplugin-vue-components -D# ornpm install unplugin-vue-components -D# oryarn add unplugin-vue-components -D# orbun add unplugin-vue-components -D
// vite.config.tsimport { definitionConfig } depuis 'vite'import vue depuis '@vitejs/plugin-vue'import Composants depuis 'unplugin-vue-components/vite'// vue-amazing-ui on-demand importimport { VueAmazingUIResolver } depuis 'vue-amazing-ui'// https://vitejs.dev/config/export default definitionConfig({
plugins : [vue(),Components({ résolveurs : [// composants d'importation automatique depuis VueAmazingUIVueAmazingUIResolver() ]})
]}) Ensuite, vous pouvez utiliser directement tous les composants de vue-amazing-ui dans votre code.
<modèle> <Bouton>bouton</Bouton> <Balise>balise</Balise> </modèle>
Tous les types peuvent être directement importés et utilisés depuis vue-amazing-ui sans aucune installation supplémentaire.
<script setup lang="ts">type d'importation { ButtonProps } depuis 'vue-amazing-ui'const shape = ref<ButtonProps['shape']>('default')</script>
<modèle>
<Bouton :shape="shape">bouton</Button>
</modèle> <script setup lang="ts">import { dateFormat, formatNumber, rafTimeout, CancelRaf, throttle, debounce, add, downloadFile, toggleDark, useEventListener, useMutationObserver, useScroll, useFps, useMediaQuery, useResizeObserver, useSlotsExist} de 'vue-amazing-ui '</script>Obtenez le code du projet
clone git https://github.com/themusecatcher/vue-amazing-ui.git
Installer les dépendances
cd vue-amazing-ui pnpm je
Exécuter le projet
développeur pnpm
Mes blogs RPSC
| Nom | Description | Nom | Description |
|---|---|---|---|
| Alerte | 警告提示 | Avatar | 头像 |
| RetourHaut | 回到顶部 | Badge | 徽标 |
| Fil d'Ariane | 面包屑 | Bouton | 按钮 |
| Carte | photo | Carrousel | 播图 |
| Cascadeur | 级联选择 | Case à cocher | 复选框 |
| Effondrement | 折叠面板 | Compte à rebours | 倒计时 |
| Sélecteur de dates | 日期选择 | Descriptions | 描述列表 |
| Dialogue | 对话框 | Diviseur | 分割线 |
| Tiroir | 抽屉 | Ellipse | 文本省略 |
| Vide | 空状态 | Fléchir | 弹性布局 |
| Bouton Flottant | 浮动按钮 | TexteDégradé | 渐变文字 |
| Grille | 栅格 | Image | photo |
| Saisir | 入框 | Numéro d'entrée | 数字输入框 |
| Recherche d'entrée | 搜索框 | Liste | 列表 |
| Barre de chargement | 加载条 | Message | 全局提示 |
| Modal | 模态框 | Notification | 通知提醒 |
| NombreAnimation | 数值动画 | Pagination | 分页 |
| Popconfirmer | 弹出确认 | Popover | photo |
| Progrès | 进度条 | Code QR | 二维码 |
| Radio | 单选框 | Taux | 评分 |
| Résultat | 结果 | Barre de défilement | 滚动条 |
| Segmenté | 分段控制器 | Sélectionner | 选择器 |
| Squelette | 骨架屏 | Curseur | 滑动输入条 |
| Espace | 间距 | Rotation | 加载中 |
| Statistique | 统计数值 | Mesures | 步骤条 |
| Glisseur | 触摸滑动插件 | Changer | 开关 |
| Tableau | 格 | Onglets | 标签页 |
| Étiqueter | 标签 | Zone de texte | 文本域 |
| Défilement de texte | 文字滚动 | Chronologie | 时间轴 |
| Info-bulle | 文字提示 | Télécharger | 上传 |
| Vidéo | 播放器 | Cascade | 瀑布流 |
| Filigrane | 水印 |
| Nom | Description | Taper |
|---|---|---|
| dateFormat | Fonction de formatage de chaîne date-heure | (valeur : nombre | chaîne | Date = Date.now(), format : chaîne = 'AAAA-MM-JJ HH:mm:ss') => chaîne |
| formatNuméro | Fonction de formatage des nombres | (valeur : nombre | chaîne, précision : nombre = 2, séparateur : chaîne = ',', décimal : chaîne = '.', préfixe ? : chaîne, suffixe ? : chaîne) => chaîne |
| rafTimeout | Fonction pour implémenter setTimeout ou setInterval à l'aide de requestAnimationFrame | (fn : Fonction, délai : nombre = 0, intervalle : booléen = faux) => objet |
| annulerRaf | Fonction pour annuler la fonction rafTimeout | (raf : { id : numéro }) => annuler |
| étrangler | Fonction d'accélérateur | (fn : Fonction, délai : nombre = 300) => quelconque |
| anti-rebond | Fonction anti-rebond | (fn : Fonction, délai : nombre = 300) => quelconque |
| ajouter | Fonction d'addition qui élimine les problèmes de précision dans l'arithmétique JavaScript | (num1 : numéro, num2 : numéro) => numéro |
| téléchargerFichier | Fonction pour télécharger un fichier avec un nom de fichier personnalisé ; si aucun nom n'est fourni, il extrait le nom du fichier de l'URL | (url : chaîne, nom de fichier ? : chaîne) => void |
| basculerSombre | Fonction pour basculer en mode sombre | () => vide |
| useEventListener | Fonction pour ajouter et supprimer des écouteurs d'événements à l'aide des hooks de cycle de vie Vue | (cible : HTMLElement | Fenêtre | Document, événement : chaîne, rappel : Fonction) => void |
| utiliserMutationObserver | Fonction pour observer les changements dans les éléments DOM à l'aide de MutationObserver | (cible : Ref | Ref[] | HTMLElement | HTMLElement[], rappel : MutationCallback, options = {}) => objet |
| utiliserScroll | Fonction permettant de surveiller la position de défilement et l'état d'un élément cible en temps réel | (target: Ref | HTMLElement | Window | Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => object |
| utiliserFps | Fonction pour surveiller le taux de rafraîchissement (FPS) du navigateur en temps réel | () => objet |
| utiliserMediaQuery | Fonction pour déterminer si l'environnement actuel correspond à une condition de requête multimédia spécifiée | (mediaQuery : chaîne) => objet |
| utiliserResizeObserver | Fonction pour observer les changements dans les dimensions des éléments DOM à l'aide ResizeObserver | (cible : Ref | Ref[] | HTMLElement | HTMLElement[], rappel : ResizeObserverCallback, options = {}) => objet |
| useSlotsExist | Fonction permettant de surveiller l'existence d'emplacements portant des noms donnés, prenant en charge des emplacements uniques ou un tableau d'emplacements | (slotsName : string | string[] = 'default') => Réactif | Réf<booléen> |
