애플리케이션 간에 Vue 구성 요소 공유 방법

Bit를 사용하여 서로 다른 프로젝트 간에 Vue 구성 요소를 쉽게 공유하고 변경 사항을 동기화하며 신속하게 구축하는 방법을 알아보십시오.

Bit는 프로젝트/라이브러리 간 단일 Vue 구성 요소 협업을 위한 도구 및 플랫폼입니다.만약 네가 아직 비트에 익숙하지 않다면, 너는 할 수 있다read more about it here.
이 강좌에서는 Vue 구성 요소를 Bit 과 공유하고 사용하는 주요 단계를 설명합니다.다음이 포함됩니다.

Bit 등록 및 공유 구성 요소 컬렉션 생성

Github 클론 데모 프로젝트로부터

Bit 설치 및 작업공간 초기화

기존 프로젝트에서 구성 요소 내보내기

구성 요소를 새 프로젝트로 가져오기

구성 요소를 업데이트하고 Bit의 클라우드로 다시 내보내기

업데이트된 구성 요소를 원본 프로젝트로 가져옵니다

모음 등록 및 만들기

Bit로 이동하여 계정을 생성합니다.사용자 이름과 암호를 입력하거나 Github 계정만 사용하십시오.
구성원인 경우 오른쪽 상단의 "새로"단추를 사용하여 미래의 공유 구성 요소를 저장할 집합을 만듭니다.개인 소장품(초대받은 사람만 사용할 수 있음)과 공공 소장품(전체 소스 커뮤니티가 보고 사용할 수 있음) 사이에서 선택하십시오.

클론 데모 응용 프로그램

우리는 우리가 진정으로 착수할 수 있도록 시범 항목이 필요하다.
이 프레젠테이션 대기 응용 프로그램을 복제하고 설치하려면:
https://github.com/teambit/vue-demo-app

$ git clone https://github.com/teambit/vue-demo-app
$ cd vue-demo-app
$ npm install

Bit 설치 및 작업공간 초기화

npm을 사용하여 컴퓨터에 Bit CLI 설치:

$ npm install bit-bin -g

계정에 로그인(CLI를 통해)

$  bit login

이것은 브라우저를 열고 계정에 로그인할 것입니다.우리는 지금 Bit를 사용하기 시작할 준비를 하고 있다.
작업공간 초기화
새 클론 항목에서 Bit 사용을 시작하려면 터미널 (프로젝트 루트 폴더) 에 다음 내용을 입력하여 작업공간을 초기화합니다.

$ bit init

다음과 같은 메시지가 표시됩니다.

successfully initialized a bit workspace.

프로젝트의 Vue 어셈블리 내보내기

새 구성 요소 추적
우리의 프로젝트는 단일 파일 구성 요소로 구성되어 있다.각 구성 요소는 하나만 차지합니다.vue 파일 - 이런 체계 구조는 강제적이지 않지만 매우 바람직하다.
Bit에서 하나의 명령으로 모든 구성 요소를 추적할 수 있습니다 (구성 요소 라이브러리에 있음).

$ bit add src/components/*

다음과 같은 메시지가 표시됩니다.

tracking 4 new components

Bit가 구성 요소를 추적하는 데 필요한 오류나 문제가 없는지 확인하려면 다음을 입력합니다.

$ bit status

다음 메시지가 표시됩니다.

 > h1 ... ok
 > todo-input-controls ... ok
 > todo-list ... ok
 > todo-list-item ... ok

모든 구성 요소에 의존 관계도 문제가 있다면click here to learn how to resolve them.
구성 컴파일러
구성 요소와 컴파일러를 한데 봉하여 우리는 어디에서든 자유롭게 사용하고 구축하며 테스트할 수 있다.이것은 Bit의 라이브 구성 요소playground 같은 기능을 사용하기 위해 구름에서 실행하는 것을 포함한다. (예시 참조)
이것은 프로젝트 작업 영역으로 가져올 수 있는 미리 만들어진 비트 컴파일러를 사용하여 완성된 것입니다.한 번만 실행하면 공유된 모든 현재와 미래 구성 요소에 적용됩니다.
Vue 컴파일러를 구성하려면 터미널에 다음을 입력합니다.

$ bit import bit.envs/bundlers/vue --compiler

임시 저장 (태그) 및 어셈블리 내보내기
구성 요소를 표시하면 다음과 같은 세 가지 작업이 발생합니다.

구성 요소 테스트 실행

구성 요소가 컴파일됩니다

이 구성 요소의 모든 향후 수정은 이 구성 요소 버전에 영향을 주지 않습니다

추적된 모든 구성 요소를 표시하기 위해 -all 로고를 추가했습니다.

$ bit tag --all 1.0.0

버전 번호를 지정하는 것은 강제적이지 않습니다. - 비트로 유지할 수 있습니다. (이 경우 새 태그마다 패치 번호가 자동으로 추가됩니다.)
tag 명령을 입력하면 터미널에서 다음을 볼 수 있습니다.

4 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)

new components
(first version for components)
     > [email protected]
     > [email protected]
     > [email protected]
     > [email protected]

우리는 지금 우리의 구성 요소를 우리의 새로운 시리즈로 내보낼 준비를 하고 있다.

bit export <username>.<collection>

예:

bit export bit.vue-demo-app

터미널에서 다음과 같이 보일 수 있습니다.

exported 4 components to scope bit.vue-demo-app

구성 요소를 Bit 클라우드의 집합에서 공유하고 다시 사용할 수 있습니다.https://bit.dev/<username>/<collection>(또는 https://bit.dev/bit/vue-demo-app/에서 나의 소장품을 살펴보고 그들이 비트의 운동장에서 현장에 나타난 것을 보자.모든 구성 요소를 어떻게 사용하는지 보여주는 예시를 작성할 수 있습니다.Bit의 구성 요소 센터 UI와 검색 엔진이 있어 구성 요소가 이전보다 더 쉽다는 것을 알 수 있다.

새 항목으로 구성 요소 가져오기

Vue cli를 사용하여 새 Vue 항목 만들기
컴퓨터에 Vue CLI가 설치되어 있지 않은 경우 터미널에 다음을 입력합니다.

npm install -g @vue/cli

새 Vue 프로젝트를 만들고'new project'라는 이름을 붙입니다.

$ vue create new-project

기본 설정 - Babel 및 ESLint:

? Please pick a preset: default (babel, eslint)

너무 좋아요.
현재, 우리의 새 프로젝트는 이전 프로젝트 (Todo Input Controls.vue) 에서 사용한 것처럼 입력 필드와 단추 구성 요소가 필요하다고 가정합니다.우리는 NPM 또는 Yarn을 사용하여 다른 방식과 같이 내장형으로 설치할 수 있습니다

$ npm i @bit/<username>.<collection>.todo-input-controls

또는 우리는 그것을 사용할 뿐만 아니라 수정할 수도 있고, 심지어는 그것을 우리의 소장품으로 내보낼 수도 있다.한번 해볼게요.
우선, 우리는 새로운 비트 작업 영역을 초기화해야 한다. (새 프로젝트의 루트 디렉터리에서)

$ bit init

그런 다음 컬렉션에서 TodoInputControls 구성 요소를 가져옵니다.

$ bit import <username>.<collection>/todo-input-controls

예:

bit import bit.vue-demo-app/todo-input-controls

완료되면 다음 메시지가 표시됩니다.

successfully imported one component
- added <username>.<collection>/todo-input-controls new versions: 1.0.0, currently used version 1.0.0

우리가 가져온 구성 요소는 현재 새로 만든 구성 요소 라이브러리 밑에 있습니다. (src 폴더가 아닌 루트 폴더에 있습니다.)

├───.git
├───components
│   ├───todo-input-controls

"todo input controls"디렉터리에서 원본 코드를 열고 새 버전으로 내보내기 전에 작은 변경을 합니다.
예를 들어 입력 필드가 비어 있을 뿐만 아니라 공백 상태일 때도 비활성화되도록 단추를 수정하고 싶다고 가정해 보세요.
이것은 우리의 단추가 수정되기 전의 외관입니다.

이것은 우리가 변화한 후의 표현이다:

너무 좋아요.우리의 업데이트가 완료되었습니다

우리의 구성 요소를 우리의 집합으로 내보냅니다

우리의 부품은 수입 부품이다.이것은 비트에 의해 추적되고 처리되었다는 것을 의미한다.이것은 내보내기 작업 흐름의 두 단계를 불필요한 것으로 만듭니다. Bit에 구성 요소를 추가하는 추적 구성 요소 목록 (Bit add) 과 구성 컴파일러 (Bit import Bit.envs/bundlers/vue - 컴파일러)

위치별로 구성 요소를 추적할 때 자신의 ID를 제공합니다. 추적된 구성 요소의 전체 목록을 가져오려면:

$ bit list

우리의 예에서 우리는 추적 구성 요소가 하나밖에 없다

비트가 우리에게 출력하는 것이 무엇인지 봅시다:

예상대로 우리는 일방통행표가 하나 있는데, 그 중에는 우리의 추적 구성 요소가 포함되어 있다

어셈블리의 ID 알리미를 사용하여 다시 내보내기 전에 표시할 수 있습니다.이번에 우리는 Bit로 하여금 새로운 버전 번호를 결정하게 할 것이다

$ bit tag <username>.<collection>/todo-input-controls

우리는 아래의 통지를 보길 희망합니다:

1 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)

changed components
(components that got a version bump)
     > <username>.<collection>/[email protected]

수정된 구성 요소를 내보냅니다:

$ bit export <username>.<collection>

당신은 메시지를 받을 수 있을 것입니다. 설명:

exported 1 components to scope <username>.<collection>

Import the updated components into our original project

이전 항목을 열고 집합에서 업데이트된 구성 요소를 가져오십시오

원격 변경 확인

$bit 목록을 기억하십니까?현재 프로젝트의 오래된 구성 요소를 확인하기 위해 로고를 추가합니다

$ bit list --outdated

컨트롤러에서 이 표를 보셔야 합니다:

모든 오래된 구성 요소 가져오기
우리는 특정 구성 요소의 최신 버전을 얻을 수 있습니다

$ bit import <userbame>.<collection>/todo-input-controls

아니면, 우리는 모든 유행이 지난 구성 요소를 간단하게 얻을 수 있습니다

$ bit import

보셔야 합니다:

successfully imported one component
- updated bit.vue-demo-app/todo-input-controls new versions: 1.0.1
Edens-MacBook-Pro:vue-demo-app eden$ bit status
modified components
(use "bit tag --all [version]" to lock a version with all your changes)
(use "bit diff" to compare changes)

> todo-list ... ok

이게 다야!😃

Conclusion

이 강좌에서 우리는 하나의 Vue 구성 요소에서 공유와 협업이 얼마나 쉬운지 보았다.Bit 덕분에 프로젝트 저장소의 경계는 협업의 경계를 표시하지 않습니다