위 챗 애플 릿 이 Vant 프레임 워 크 를 도입 하 는 전 과정 기록

머리말
가끔 은 위 챗 애플 릿 의 원생 ui 가 조금 떨 어 졌 다 고 생각 할 때 가 있 습 니 다.그러면 3 자 프레임 워 크 를 도입 할 수 있 을까요?본 고 는 Vant 를 도입 하여 예 를 들 면 모두 8 개의 절 차 를 포함한다.클 라 우 드 개발 이 든 아니 든 똑 같이 사용 합 니 다.
실현 절차
1.위 챗 애플 릿 의 개발 도 구 를 열 고 프로젝트 에 들어간다.프로젝트 의 루트 디 렉 터 리 파일 에서 오른쪽 단 추 를 누 르 십시오.터미널 에서 열 기 를 선택 하 십시오.(루트 디 렉 터 리 주의)

2.명령 창 에 npm init 를 입력 합 니 다.그리고 모든 설정 은 기본 설정 에 따라 진행 되 며 리 턴 버튼 만 누 르 면 됩 니 다.

3.명령 창 에 npm install 을 입력 하여 구축 합 니 다.성공 하면 루트 디 렉 터 리 에 package.json 과 package-lock.json 파일 을 생 성 합 니 다.

4.그 다음 에 Vant 프레임 워 크 를 계속 설치 하고 절 차 는 홈 페이지 에 따라 조작 할 수 있 습 니 다vant-contrib.gitee.io/vant-weapp/.
　4.1 npm i @vant/weapp -S --production
　4.2 npm i vant-weapp -S --production

4.3 app.json 수정

4.4 procject.config.json 수정

5.위 챗 개발 자 도구 로 돌아 가'도구'란 에서'npm 구축'을 찾 습 니 다.빌 드 성공 을 기다 리 면 됩 니 다.

6.마지막 으로 npm 모듈 을 사용 하려 고 합 니 다."상세 정보"에서"npm 모듈"을 사용 하여 선택 하면 됩 니 다.

7.Vant 구성 요 소 를 사용 하여 app.json 또는 index.json 에 구성 요 소 를 도입 합 니 다.상세 한 소개Vant 홈 페이지 빠르게 시작

8.페이지 에서 사용 하고 구성 요 소 를 직접 도입 하면 됩 니 다.

...에피소드...
이것 은 테스트 번호 AppId 가 만 든 프로젝트 이기 때문에 클 라 우 드 개발 을 사용 하지 않 았 습 니 다.뒤쪽 으로 가서 조작 이 끝 난 후에 잘못 보고 하 게 되 었 습 니 다!다음 그림 과 같이 잘못된 정 보 를 보고 합 니 다(1).이때 나 는 이 프로젝트 디 렉 터 리 가 나의 다른 클 라 우 드 개발 프로젝트 의 파일 디 렉 터 리 와 다 르 기 때문에 파일 을 찾 을 수 없다 는 것 을 알 게 되 었 다.구체 적 인 원인 은 나 도 모른다.그러나 저 는 클 라 우 드 개발 프로젝트 에서 성 공 했 습 니 다.다음 그림(2).절 차 는 위 에서 쓴 절차 와 똑같다.
이 를 통 해 여러분 은 가능 한 한 정식 AppId(즉,애플 릿 공공 플랫폼 에 등 록 된 AppId)를 사용 하 라 는 결론 을 얻 었 습 니 다.뒤로 갈수 록 번 거 로 움 이 커지 는 것 을 피하 다.
클 라 우 드 개발 프로젝트 로 다시 한 번 조작 해 문제 가 있 는 노트 를 기록 하 는 것 이 아니 라 마지막 성공 효 과 를 올 리 려 고 했다.하지만 생각해 보 니 괜 찮 았 다.다음 부 터 는 이 실 수 를 하지 말 라 고 자신 을 깨 달 았 다.그래서 결국 이 블 로그 로 보 여 드 리 겠 습 니 다.여러분 에 게 일 깨 워 주 는 역할 도 할 수 있 기 를 바 랍 니 다.디 테 일 에 주의 하고 부주의 하지 마 세 요.
...신기 한 광경...
다음 날 에 저 는 위 챗 개발 자 도 구 를 열 어 보 니 테스트 번호 AppId 의 프로젝트 가 또 되 었 고 콘 솔 에서 잘못된 정 보 를 보 도 했 습 니 다.이거 어색 하 잖 아!어떻게 된 일 인지 잘 모 르 겠 어 요.감히 말 을 못 하 다.직접 위의 그림,아래 그림(3);
그림(1):오류 보고 정보

그림(2):클 라 우 드 개발 프로젝트 에서 Vant 구성 요 소 를 성공 적 으로 사용 하 였 습 니 다.

그림(3):테스트 번호 AppId Vant 프레임 워 크 성공 사용

총결산
위 챗 애플 릿 이 Vant 프레임 워 크 를 도입 한 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 위 챗 애플 릿 이 Vant 프레임 워 크 를 도입 한 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!