vin ui

JD 스타일의 경량 VUE 구성 요소 라이브러리, 모바일 H5 및 미니 프로그램 개발 지원

---

Vinui는 Nutui (JD 스타일 경량 모바일 컴포넌트 라이브러리)의 설계 및 구현 및 Taro 애플릿 구성 요소 라이브러리 버전 Nutui-Vue를 기반으로 구현 된 UniAPP 버전의 설계 및 구현을 나타냅니다.

UNIAPP의 일부 기능을 수정 및 조정하고 일부 새로운 구성 요소가 추가되어 일부 구성 요소의 기능도 향상되었습니다.

빨리 시작하십시오

프로젝트 문서 : 빠른 시작을 참조 할 수 있습니다

설치하다

Vinui는 구성 요소를 설치하기위한 NPM 패키지 및 UNI_Modules 패키지를 제공합니다.

방법 1 : NPM 설치 및 작동

 # Using npm
npm install @vingogo/uni-ui

# Using yarn
yarn add @vingogo/uni-ui

# Using pnpm
pnpm add @vingogo/uni-ui

방법 2 : UNIAPP 플러그인 시장 다운로드

UNIAPP 시장 플러그인 주소 : https://ext.dcloud.net.cn/plugin?id=11187

방법 3 : 코드를 다운로드하십시오

GitHub를 통해 Vinui 코드를 다운로드 한 다음 포장 된 코드를 자신의 프로젝트에 복사하십시오.

1. 저장소 코드 복제 :

git clone https://github.com/vingogo/vin-ui.git

2. 설치 종속성 :

pnpm i

3. packages/uni-ui 디렉토리에서 비즈니스에 적합한 Vinui 코드를 개인화 한 조정하십시오.
4. 빌드 코드는 원래 TS 파일에서 컴파일 된 JS 파일을 생성하고 ES2015로 변환합니다.

pnpm run build:uni

packages/uni-ui/uni_modules 에서 복사 할 파일을 생성합니다

사용 방법

1. pages.json 에 Easycom 구성 추가

{
  "easycom" : {
    // 此处根据实际文件位置进行修改，如下为通过 npm 包安装的方式配置
    "^vin-(.*)" : " @vingogo/uni-ui/lib/components/$1/index.vue "
  },
  // 此为本身已有的内容
  "pages" : [
    // ......
  ]
}

2. 스타일을 소개합니다

프로젝트 입력 파일 main.ts 또는 main.js 파일에 다음 코드를 추가하십시오.

 import '@vingogo/uni-ui/lib/style.css' ;

3. 프로젝트에서 사용 :

< vin-button type="primary">button</ vin-button >

프로젝트 운영

이 프로젝트는 PNPM을 사용하여 설치 및 실행을 시작하고 프로젝트를 시작하는 것이 좋습니다.

1. 설치 종속성

pnpm i

2. H5 또는 애플릿을 실행하십시오

pnpm run dev

3. 대화식 명령 줄 옵션을 기반으로 실행할 환경을 선택하십시오.
4. 예제/dist/dev 폴더를 실행하려면 브라우저 또는 지정된 애플릿에서 코드를 실행하십시오.

Vinui 구성 요소 빌딩

• NPM 버전 코드 빌드 :

pnpm run build:lib

위 명령을 실행하면 NPM을 게시하기위한 코드는 packages/uni-ui/lib 에서 생성됩니다.

• UNI_MODULES 버전 코드 빌드 :

pnpm run build:uni

위 명령을 실행 한 후 UniAPP 시장을 게시하기위한 코드는 packages/uni-ui/uni_modules

Vinui 기능

• 주류 모바일 시나리오를 다루는 50 개 이상의 고품질 구성 요소
• ? 동적 사용자 정의 테마 및 구성 요소 수준의 사용자 정의 테마를 지원합니다
• JD 비전 사양을 기반으로합니다
• ? 다크 모드를 지원합니다
• ? 동시에 H5+ 멀티 엔드 애플릿을 개발하기위한 코드 세트를 지원합니다.
• VSCODE 구성 요소 속성의 강조 표시를 지원합니다
• ? 주문형 인용을 지원합니다
• 자세한 문서 및 예
• ? 지원 TypeScript
• ? 국제화 지원

링크

• 구성 요소 사용 설명서
• github
• Gitee
• UNIAPP 시장 플러그인

연결하다

Vinui 문제와 관련하여 WeChat을 추가하십시오. 참고 : Vinui