>  기사  >  웹 프론트엔드  >  uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

青灯夜游
青灯夜游앞으로
2021-12-20 14:43:503207검색

ColorUI는 H5, WeChat 애플릿, Android, iOS 및 Alipay에 적합한 멋진 맞춤형 CSS 구성 요소 라이브러리입니다. 그렇다면 uni-ui 프로젝트에 ColorUI를 어떻게 도입할까요? 다음 기사에서는 uni-ui 프로젝트에 ColorUI-UniApp 플러그인을 도입하는 방법을 소개합니다.

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

1. uniapp 플러그인 마켓에서 ColorUI-UniApp 플러그인을 검색한 후 다운로드하여 압축을 푼다.

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

2. colorui 파일을 uni- ui 프로젝트 루트 디렉터리, 그림과 같이 :

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

3. uni-ui 프로젝트 App.vue 파일 구성은 다음과 같습니다.

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

이것이 uni-ui 프로젝트의 끝입니다. ColorUI-UniApp 플러그인 소개

4. 사용자 정의 탐색 모음

cu-custom.vue는 다음과 같이 구성됩니다.

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

main.js는 다음과 같이 구성됩니다.

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

pages.json

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

5. 페이지 사용법은 다음과 같습니다:

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

페이지 효과 사진:

uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록

권장: "uniapp tutorial"

위 내용은 uni-ui 프로젝트에 ColorUI를 도입한 방법을 기록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제