간단히 말해서 Storyblok을 VueJS 프로젝트에 통합합니다.

소개

이 튜토리얼에서는 Storyblok을 Vue Js 프로젝트에 추가/연결하는 방법을 배웁니다. 우리 대부분은 Storyblok이 무엇인지 궁금할 것입니다. 흠, 당황하지 마십시오. 설명하겠습니다. Storyblock은 컨텐츠 제작에 사용할 수 있는 헤드리스 CMS입니다. 자세한 내용은 여기에서 Storyblok 설명서를 참조하십시오.

전제 조건

프레임워크로서의 JavaScript 및 VuetJ에 대한 기본적인 이해

로컬 시스템에 설치된 노드

로컬 시스템에 Vue CLI 설치

Storyblok에서 계정 만들기

React 설치 및 설정

프로젝트를 시작하고 실행할 수 있도록 환경을 설정해 보겠습니다.
VuetJs 프로젝트를 만들려면 아래 단계를 따르거나 여기에서 VueJs 문서 웹사이트를 방문할 수 있습니다.

npm init vue@3

터미널에 표시된 단계를 따르고 설치가 완료되면 아래 명령을 사용하여 프로젝트 폴더로 이동합니다.

 cd storyblok-vue-app

아래 명령을 사용하여 프로젝트에 npm을 설치합니다.

 npm install

그런 다음 아래 명령을 실행하여 애플리케이션을 시작합니다.

  npm run dev

마지막으로 브라우저의 명령줄에 표시된 포트를 사용하여 VueJs 개발 서버를 제공합니다. 이 경우http://localhost:3000 .



유! Vue 프로젝트가 실행 중입니다.

참고: 이 프로젝트를 위해 Tailwind.css를 프로젝트 스타일로 사용할 것입니다. Tailwind를 vue 프로젝트에 추가하는 방법에 대한 자세한 내용은 여기에서 Tailwind css 공식 웹사이트를 방문하세요.

Storyblok 공간 구성

VueJs 앱 생성 및 실행을 완료했으므로 이제 Storyblok 앱에 공간을 생성할 차례입니다. 이 튜토리얼의 시작 부분에서 Storyblok에 계정을 만들었음을 기억하세요. 아직 하지 않았다면 아직 늦지 않았습니다. 이 링크를 클릭하여 Storyblok 공간을 만드십시오.



예 💃, 방금 Storyblok 공간에 샘플 콘텐츠를 만들었습니다. 홈 스토리를 보려면 아래를 살펴보고 스토리 블록 비주얼 편집기를 표시하려면 클릭하십시오.

시각적 편집기 활성화

Storyblok Visual Editor에서 프로젝트를 보려면 공간에서 기본 환경 URL을 설정해야 합니다(공간으로 돌아가려면 Visual Editor 화면의 왼쪽 상단에 있는 화살표를 클릭). 그런 다음 설정 > 일반 > 기본 위치를 삭제하고 새 위치 필드를 http://localhost:3000/으로 설정합니다.



이제 화면 오른쪽 창에 있는 콘텐츠 섹션 아래의 홈 스토리로 돌아갑니다. Visual Editor를 보기 위해 열면 Vue 앱이 표시되지 않습니다.

Storyblok에 Vue 연결하기

아래 명령을 사용하여 Storyblok Vue SDK를 설치합니다.

npm install @storyblok/vue@next

아래 코드 블록을 추가하여 main.js 파일에서 플러그인을 초기화하고 Storyblok 공간에서 액세스 토큰도 추가하세요.

import { createApp } from 'vue'
import App from './App.vue'
import { StoryblokVue, apiPlugin } from '@storyblok/vue';
import './index.css'
const app = createApp(App);

app.use(StoryblokVue, {
  accessToken: 'CThcj1fTCUrhroIUvB8ykgtt',
  bridge: process.env.NODE_ENV !== "production", // optimises by excluding the bridge on production
  use: [apiPlugin],
});

mount('#app');

참고: index.css의 출처가 궁금하다면 프로젝트에 Tailwind를 추가한 것을 기억하세요.

토큰을 복사하려면 설정 > API 키 >

Vue 앱에 구성 요소 표시

반응 구성 요소 만들기

결론