풀스택 오픈 소스 전자상거래의 꿈을 쫓다 - Vue Storefront & Vendure

처음부터 전자 상거래 상점을 구축하는 것이 어떤 것인지 궁금한 적이 있습니까? 이러한 모든 주문, 제품, 범주 등을 처리하는 데는 시간이 걸리고 시간은 경쟁자를 이기고 시장 리더가 되고자 하는 사람으로서는 가질 수 없는 리소스입니다. 아무 것도 없는 상태에서 시작하는 대신 견고한 레고 브릭 구성 요소로 매장을 구축하는 데 사용할 수 있는 도구가 이미 구현되어 있다고 말하면 어떻게 될까요? 그리고 가능한 최고의 프로젝트를 구축하기 위해 지식을 공유하는 전 세계 수천 명의 개발자가 이러한 도구를 지원한다면 어떨까요? 마지막으로, 이러한 도구는 무료이며 오픈 소스이므로 개발자가 소프트웨어를 구축할 때까지 몇 주 또는 몇 달을 기다리지 않고 한 줄 명령을 사용하여 몇 분 만에 테스트할 수 있다고 말하면 어떻게 될까요? 꿈 같지 않나요?

꿈의 스택 -> Vue Storefront & Vendure 을 선물합니다.

드림 스택

Vue Storefront는 헤드리스 상거래를 위한 번개처럼 빠른 프런트엔드 플랫폼입니다. Vue Storefront를 사용하여 사이트 성능을 높이고 고객 여정을 형성하며 개발자의 창의성을 자유롭게 하십시오. 마지막 프런트엔드입니다.



Vendure는 헤드리스 프레임워크입니다. 즉, GraphQL API를 통해 콘텐츠를 제공하므로 원하는 기술로 매장 애플리케이션을 자유롭게 구현할 수 있습니다. Vendure는 개발자 생산성을 최우선으로 합니다. 프레임워크는 TypeScript로 작성되었으며 npm 생태계에 구축되었습니다. TypeScript와 GraphQL의 조합은 종단 간 유형 안전성을 제공합니다.

시험해 볼 수 있습니까?

그래 넌 할수있어! Vue Storefront & Vendure 통합은 현재 버전 1.0.0.beta.2이므로 이미 테스트할 수 있습니다.

벤처

먼저 로컬 Vendure 서버를 설정해야 합니다. 귀하의 필요에 가장 적합한 옵션을 선택하십시오.

npx @vendure/create <project_name>

이 튜토리얼을 위해 가장 간단한 구성을 선택했습니다.

데이터베이스로서의 SQLite

프로그래밍 언어로서의 TypeScript

모의 데이터로 채우기

관리자 패널용 사용자 이름 및 암호

다음으로 프로젝트 디렉터리로 이동하고 vendure.config.ts에서 auth options 속성을 수정합니다.

cd <project_name> 

// vendure-config.ts

  ...
  authOptions: {
    tokenMethod: 'bearer', // authorization header method
    requireVerification: false, // disable register by email verification
  },

마지막으로 서버를 시작합니다.

yarn start

뷰 스토어프론트

먼저 Vue Storefront CLI를 전역적으로 설치합니다.

yarn global add @vue-storefront/cli

다음으로 프로젝트를 초기화하고 이름으로 바꿉니다.

vsf init <project_name>

Vendure(베타)를 선택하거나 Github 옵션에서 사용자 지정 템플릿을 사용하고 다음을 입력합니다. https://github.com/vuestorefront/template-vendure.git

그런 다음 프로젝트 디렉토리로 이동하여 .env.example 파일을 .env로 복사합니다.

cd <project_name>

cp .env.example .env

마지막으로 종속성을 설치하고 개발 모드에서 프로젝트를 시작합니다.

yarn

yarn dev

그리고 그게 다야! 어느 시점에서 길을 잃었다면 다음을 확인하십시오.

Integration docs

요약

최신 기술을 사용하여 풀스택 오픈 소스 전자상거래 상점을 성공적으로 만들었습니다. 잘했어요!

경험이 마음에 드셨다면 다음 모든 프로젝트에서 github 스타로 활동하세요.

Vendure

Vue Storefront

Vue Storefront & Vendure Integration

보너스

Vendure, Vue Storefront 및 통합 자체에 대해 자세히 알아보려면 를 확인하십시오.