경 동 Vue 3 구성 요소 라 이브 러 리 는 애플 릿 개발 의 상세 한 절 차 를 지원 합 니 다.

원본 코드 먼저 보기:https://github.com/jdf2e/nutui
NutUI 3.0 홈 페이지:https://nutui.jd.com/3x/
애플 릿 다단 계 어댑터
설계 취지
크로스 엔 드 애플 릿 의 개발 과정 에서 우 리 는 적당 한 구성 요소 라 이브 러 리 를 사용 할 수 없다 는 것 을 발견 했다.특히 전자상거래 몰 류 장면 의 업 무 를 할 때 경 동 앱 규범 에 부합 되 는 구성 요소 라 이브 러 리 가 우리 의 애플 릿 프로젝트 에 지원 을 제공 하지 않 았 다.이 공백 을 메 우 고 NutUI 구성 요소 라 이브 러 리 가 더 많은 개발 자 들 에 게 편 의 를 가 져 다 줄 수 있 도록 NutUI 3.0 에 애플 릿 다 중 어댑터 능력 을 추가 하기 로 했 습 니 다.
어떻게
타 로 는 애플 릿 크로스 엔 드 개발 에서 뛰어난 활약 을 보 였 고 타 로 3x 는 2020 년 11 월 에 도 Vue 3 를 지원 한다 고 발 표 했 기 때문에 우 리 는 타 로+Vue 의 기술 스 택 을 이용 하여 애플 릿 에 여러 엔 드 를 맞 추 는 목적 을 달성 할 수 있다.
Taro 의 특징 은 다음 과 같다.
-위 챗 애플 릿 의 네 이 티 브 코드 를 위 챗 플랫폼,바 이 두 플랫폼 등 으로 전환 할 수 있 습 니 다.
-Taro 프레임 워 크 는 유일 하 게 경 동 애플 릿 에 적합 한 프레임 워 크 입 니 다.
-React/Vue 문법 을 지원 하고 구성 요소 화 와 TypeScript 를 잘 지원 합 니 다.
-업계 영향력 이 크 고 지역사회 가 활발 하 며 장기 적 인 지원 이 보장 된다.
-다 중 동기 디 버 깅 지원,주류 애플 릿 에 적합
Taro 의 이러한 특징 과 능력 을 NutUI 구성 요소 라 이브 러 리 에 추가 하여 서로의 기능 을 연결 시 킬 수 있다 면 NutUI 구성 요소 라 이브 러 리 크로스 엔 드 개발 애플 릿 의 꿈 을 실현 할 수 있 습 니 다.팀 의 큰 소 들 의 지도 아래 젊은이 들 은 잠 을 이 루 지 못 하고 반복 적 인 시도 와 탐색 을 하 며 적당 한 방법 을 추출 했다.쉬 운 것 부터 어 려 운 것 까지 다음 과 같은 네 가지 가 있다.
-Taro 자체 호환성:기 존 3.0 구성 요소 중 checkbox,radio 및 steps 등 9 개 구성 요 소 는 Taro 에서 직접 사용 할 수 있 습 니 다.
-스타일 적합:양 끝 스타일 및 css 선택 기 는 차이 가 있 으 므 로 맞 춤 형 처리 가 필요 합 니 다.
-DOM API 의 차별 화 처리:요 소 를 가 져 오 는 방법 에 따라 타 로 엔 드 에서 구성 요소 의 기능 이 실 효 될 수 있 으 므 로 이러한 구성 요 소 는 DOM 획득 차원 에서 조정 해 야 합 니 다.
-깊이 적응:이것 도 작업량 의 가장 큰 부분 이 므 로 Taro 나 위 챗 네 이 티 브 능력 으로 구성 요 소 를 재 작성 해 야 합 니 다.예 를 들 어 picker,swiper 와 backtop 등 상호작용 이 비교적 복잡 한 구성 요 소 를 우 리 는 Taro 등 을 바탕 으로 적당 한 목적 을 달성 해 야 한다.

각 구성 요소 에 대해 저 희 는 기 존 구성 요소 의 디 렉 터 리 구조 에.taro.vue파일 을 추가 하여 Taro 호 환 을 전문 적 으로 처리 합 니 다.demo 와 문서 에 대해 저 희 는 홈 페이지 문서 에 페이지 서명 전환 을 추가 하여 서로 다른 환경 에서 의 사용 방법 과 해당 하 는 demo 를 쉽게 볼 수 있 습 니 다.
물론 애플 릿 환경 에서 효 과 를 보 려 면 홈 페이지 데모 에서 QR 코드 를 보 여 주 는 것 외 에 도 저희 프로젝트 의 mobile-taro 에 있 는 vue 디 렉 터 리 를 복사 할 수 있 습 니 다.시작 하면 효 과 를 볼 수 있 습 니 다.
사용 방식
NutUI 를 도입 하면 프로젝트 에서 사용 할 수 있 습 니 다.

# Vue3    

npm i @nutui/nutui@next -S

# NutUI        

npm i @nutui/nutui@taro -S

NutUI 3.0 에 대하 여
기술 관전 포인트:
1.부 에 3 포옹
Vue 3 새로운 특성 Composition API,Teleport,Emits 등 도입
파괴 적 변경,전면 업그레이드
조합 식 API Composition 문법 재 구성,구조 뚜렷,기능 모듈 화
구성 요소 emits 이벤트 단독 추출,코드 가 독성 강화
Teleport 의 새로운 기능 을 사용 하여 마 운 트 클래스 구성 요 소 를 재 구성 합 니 다.
2.빌 드 도 구 를 Vite 2.x 로 업그레이드
웹 팩 을 버 리 고 차세 대 전단 구축 도구 인 Vite 를 도입 합 니 다.가동 속 도 는 기 존 30s 에서 500 ms 정도 로 향상 되 어 개발 효율 을 대폭 높 일 것 이다.
3.TypeScipt 전면 사용
NutUI 3.0 은 TypeScript 를 주요 개발 언어 로 사용 하고 전단 응용 복잡 도가 계속 증가 하 는 배경 에서 구성 요소 가 유지 되 지 않 고 확장 하기 어 려 운 문제 에 대응 합 니 다.
시각 체험 전면 업그레이드
NutUI 3.0 은 최근 에 발 표 된 JD App 10.0 규범 에 따라 소매 가 많은 응용 장면 과 결합 하여 NutUI 구성 요 소 를 재 정리 하고 디자인 한다.
-불필요 한 컨트롤 줄 이기
-모 바 일 디자이너 의 빠 른 스토리 지 기반 구성 요소 복원 돕 기
-스토리 보드 디 테 일 디자인 기준 수립
-경계 12207 의 모듈 화 유 니 버 설 수준 향상
-건설 및 개발 연계 의 기초 기준
-산 연 수출 연계 의 효율 성 을 높이 고 수출 작업량 을 낮 춘 다
-경 동 디자인 언어 체 계 를 바탕 으로 장면 구축
-골격 을 정밀 화하 여 메 인 프로 세 스 를 재 구성 하고'장면 동선'을 구축 하여 체험 을 더욱 원활 하 게

설 문 조사 연구.
더 좋 은 서 비 스 를 제공 하기 위해 서 몇 분 의 시간 을 내 서 귀하 의 느낌 과 건 의 를 저희 에 게 알려 주 십시오.저 희 는 귀하 의 답변 정 보 를 엄 격 히 비밀 로 할 것 입 니 다.이번 조사 연 구 는 유상 조사 로 설 문 지 를 작성 한 사용 자 는 경 동 조 이 주변 선물 을 뽑 을 수 있다.
설 문 지 링크:https://get.jd.com/

지금까지 경 동 Vue 3 구성 요소 라 이브 러 리 지원 애플 리 케 이 션 개발 이 었 습 니 다!경 동 Vue 3 구성 요소 라 이브 러 리 에 대한 자세 한 내용 은 저희 의 다른 관련 글 을 주목 해 주 십시오!