vue amazing ui 다운로드 - vue amazing ui 소스 코드 다운로드

vue amazing ui

타사 구성 요소

1.0.0

다운로드

Vue 놀라운 UI

선적 서류 비치

Vue 놀라운 UI

특징

구성 요소 라이브러리는 [email protected] + [email protected] + [email protected] + [email protected] 로 구현됩니다.
현재 63 기본 UI 구성 요소와 16 유틸리티 기능이 포함되어 있으며 지속적인 탐색과 업데이트가 진행 중입니다.
게다가 그들은 모두 나무를 흔들 수 있습니다.
Vue Amazing UI의 모든 내용은 TypeScript로 작성되었습니다. Typescript 프로젝트와 원활하게 작동할 수 있습니다.
모든 구성 요소는 단일 파일 구성 요소 SFC 스타일로 구축되었으며 독립적으로 사용할 수 있습니다.
번거로움 없이 바로 사용할 수 있습니다.

설치

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

구성요소 사용

글로벌 등록 모든 구성 요소(권장하지 않음)

나무를 흔들지 마세요. 번들에는 중복 코드가 있습니다.

 'vue'에서 가져오기 { createApp } './App.vue'에서 앱 가져오기 'vue-amazing-ui'에서 VueAmazingUI 가져오기 'vue-amazing-ui/css'const app = createApp(App)app.use(VueAmazingUI )app.mount('#앱')

글로벌 부분 등록

이 양식에서는 가져온 구성요소만 번들로 제공됩니다.

 import { createApp } from 'vue'import 앱 from './App.vue'import { 버튼, 태그 } 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')

지역 등록

이 양식에서는 가져온 구성요소만 번들로 제공됩니다.

 <script setup lang="ts">'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import 'vue-amazing-ui/es/tag에서 { 버튼, 태그 } 가져오기 /Tag.css'</script>
<템플릿>
  <버튼>버튼</버튼>
  <태그>태그</Tag>
</템플릿>

자동 가져오기 스타일(권장)

vite-plugin-style-import 플러그인을 사용하여 필요에 따라 구성요소 스타일을 자동으로 가져옵니다. 플러그인은 템플릿에서 사용된 구성 요소를 자동으로 구문 분석하고 해당 스타일을 가져옵니다.

 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 { DefineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { createStyleImportPlugin } from 'vite-plugin-style-import'// 자동으로 컴포넌트 stylesimport { VueAmazingUIStyleResolve } from ' vue-amazing-ui'// https://vitejs.dev/config/export 기본 정의 구성({
  플러그인: [vue(),// 수요에 따라 구성 요소 라이브러리 스타일 가져오기createStyleImportPlugin({ 해결:[VueAmazingUIStyleResolve() ]})
  ]})

그런 다음 전역 부분 등록을 사용하든 로컬 등록을 사용하든 관계없이 구성 요소 스타일을 수동으로 가져올 필요 없이 코드에서 vue-amazing-ui 의 모든 구성 요소를 사용할 수 있습니다.

글로벌 부분 등록

 import { createApp } from 'vue'import 앱 from './App.vue'import { 버튼, 태그 } from 'vue-amazing-ui'const app = createApp(App)app.use(Button).use(Tag) app.mount('#앱')

지역 등록

 <script setup lang="ts">'vue-amazing-ui'에서 { 버튼, 태그 } 가져오기</script>
<템플릿>
  <버튼>버튼</버튼>
  <태그>태그</Tag>
</템플릿>

자동 온디맨드 가져오기(강력히 권장)

요청 시 자동으로 구성 요소를 가져오려면 unplugin-vue-components 플러그인을 사용하세요. 플러그인은 템플릿에 사용된 구성 요소를 자동으로 구문 분석하고 구성 요소와 스타일을 가져옵니다.

 pnpm add unplugin-vue-comComponents -D# ornpm install unplugin-vue-comComponents -D# oryarn add unplugin-vue-comComponents -D# orbun add unplugin-vue-comComponents -D

 // vite.config.tsimport { 정의 구성 } from 'vite'import vue from '@vitejs/plugin-vue'import 구성 요소 from 'unplugin-vue-comComponents/vite'// vue-amazing-ui on-demand importimport { VueAmazingUIResolver } 'vue-amazing-ui'// https://vitejs.dev/config/export 기본 정의 구성({
  플러그인: [vue(),Components({ 리졸버: [// VueAmazingUIVueAmazingUIResolver()에서 구성요소 자동 가져오기 ]})
  ]})

그런 다음 코드에서 vue-amazing-ui 의 모든 구성 요소를 직접 사용할 수 있습니다.

 <템플릿>
  <버튼>버튼</버튼>
  <태그>태그</Tag>
</템플릿>

사용 유형

모든 유형은 추가 설치 없이 vue-amazing-ui 에서 직접 가져와서 사용할 수 있습니다.

 <script setup lang="ts">'vue-amazing-ui'const Shape = ref<ButtonProps['shape']>('default')에서 가져오기 유형 { ButtonProps }</script>
<템플릿>
  <Button :shape="shape">버튼</Button>
</템플릿>

기능 사용

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

프로젝트

프로젝트 코드 받기

 자식 클론 https://github.com/themusecatcher/vue-amazing-ui.git

종속성 설치

 CD Vue-놀라운-UI

pnpm 나

프로젝트 실행

 pnpm 개발자

블로그

내 CSDN 블로그

구성요소

이름	설명	이름	설명
알리다	警告提示	화신	이미지
뒤로가기	回到顶부	배지	徽标
탐색경로	국면包屑	단추	按钮
카드	조각그림	회전목마	轮播图
캐스케이더	级联选择	체크박스	复选框
무너지다	折叠면板	카운트다운	倒计时
날짜 선택기	日期选择	설명	描述列表
대화	对话框	분할기	분배하다
서랍	抽屉	생략	文本省略
비어 있는	공공态	몸을 풀다	弹性布局
플로트버튼	浮动按钮	그라데이션 텍스트	渐变文字
그리드	栅格	영상	사진
입력	输入框	입력번호	数字输入框
입력검색	搜索框	목록	列表
로딩바	加载条	메시지	전체局提示
모달	模态框	공고	통지提醒
번호애니메이션	数值动画	쪽수 매기기	분할
팝확인	弹출确认	팝오버	气泡卡그림
진전	进道条	QR코드	이维码
라디오	单选框	비율	评分
결과	结果	스크롤바	滚动条
분할됨	분배기 제조공장	선택하다	选择器
해골	骨架屏	슬라이더	滑动输入条
공간	间距	회전	加载中
통계량	统计数值	단계	步骤条
스위퍼	触摸滑动插件	스위치	开关
테이블	설명	탭	标签页
꼬리표	标签	텍스트 영역	文本域
텍스트스크롤	문자활용	타임라인	时间轴
툴팁	문자해석	업로드	상
동영상	播放器	폭포	瀑布流
양수표	물 印

기능

이름	설명	유형
날짜형식	날짜-시간 문자열 함수 형식 지정	(값: 숫자 \| 문자열 \| 날짜 = Date.now(), 형식: 문자열 = 'YYYY-MM-DD HH:mm:ss') => 문자열
형식번호	숫자 서식 기능	(값: 숫자 \| 문자열, 정밀도: 숫자 = 2, 구분자: 문자열 = ',', 소수점: 문자열 = '.', 접두사?: 문자열, 접미사?: 문자열) => 문자열
raf시간 초과	`requestAnimationFrame` 을 사용하여 `setTimeout` 또는 `setInterval` 구현하는 함수	(fn: 함수, 지연: 숫자 = 0, 간격: 부울 = false) => 객체
취소Raf	`rafTimeout` 기능을 취소하는 기능	(raf: { id: 번호 }) => 무효
조절판	스로틀 기능	(fn: 기능, 지연: 개수 = 300) => 임의
디바운스	디바운스 기능	(fn: 기능, 지연: 개수 = 300) => 임의
추가하다	JavaScript 연산의 정밀도 문제를 제거하는 추가 기능	(num1: 숫자, num2: 숫자) => 숫자
다운로드파일	사용자 정의 파일 이름을 가진 파일을 다운로드하는 기능; 이름이 제공되지 않으면 URL에서 파일 이름을 추출합니다.	(url: 문자열, fileName?: 문자열) => void
토글다크	다크 모드를 전환하는 기능	() => 무효
사용이벤트리스너	Vue 수명주기 후크를 사용하여 이벤트 리스너를 추가 및 제거하는 기능	(대상: HTMLElement \| Window \| Document, 이벤트: 문자열, 콜백: 함수) => void
useMutationObserver	`MutationObserver` 사용하여 DOM 요소의 변화를 관찰하는 기능	(대상: Ref \| Ref[] \| HTMLElement \| HTMLElement[], 콜백: MutationCallback, 옵션 = {}) => 객체
사용스크롤	대상 요소의 스크롤 위치 및 상태를 실시간으로 모니터링하는 기능	(대상: Ref \| HTMLElement \| Window \| Document = window, throttleDelay: number = 0, onScroll?: (e: 이벤트) => void, onStop?: (e: 이벤트) => void) => 객체
useFps	브라우저의 새로 고침 빈도(FPS)를 실시간으로 모니터링하는 기능	() => 객체
useMediaQuery	현재 환경이 지정된 미디어 쿼리 조건과 일치하는지 확인하는 기능	(mediaQuery: 문자열) => 객체
useResizeObserver	`ResizeObserver` 사용하여 DOM 요소 크기의 변화를 관찰하는 기능	(대상: Ref \| Ref[] \| HTMLElement \| HTMLElement[], 콜백: ResizeObserverCallback, 옵션 = {}) => 객체
useSlotsExist	단일 슬롯 또는 슬롯 배열을 지원하여 특정 이름을 가진 슬롯의 존재를 감시하는 기능	(slotsName: string \| string[] = 'default') => 반응형 \| Ref<부울>