본문으로 건너뛰기

시작하기

첫 번째 단계​

위젯을 시작하려면 프로젝트에 필요한 패키지를 추가하세요.

npm install @svar-ui/vue-core
npm install @svar-ui/vue-editor

또는

yarn add @svar-ui/vue-core
yarn add @svar-ui/vue-editor

프로젝트에 위젯을 가져오세요. 모든 요소가 올바르게 표시되도록 테마와 스타일을 가져오세요.

<script setup>
import { Willow } from '@svar-ui/vue-core'; //import theme
import { Editor } from '@svar-ui/vue-editor';
import "@svar-ui/vue-editor/all.css"; //import styles
</script>

<template>
  <Willow>
    <Editor />
  </Willow>
</template>

Willow 컴포넌트는 모든 SVAR 위젯에 필요한 스타일을 추가하는 기본 테마 래퍼 역할을 합니다. Editor 컴포넌트는 없이도 동작할 수 있지만, 스타일이 적용되지 않으므로 수동으로 스타일을 추가해야 합니다. 애플리케이션의 최상위 레벨에 Willow 태그를 포함하는 것을 권장합니다.

전체 초기화 코드​

위젯의 동작을 확인하려면 위젯에 몇 가지 항목을 추가하세요.

<script setup>
import { Editor, Willow } from "@svar-ui/vue-editor";
import "@svar-ui/vue-editor/all.css"; //import styles

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "text", key: "descr", label: "Description" },
  { comp: "text", key: "role", label: "Role" }
];

const values = {
  name: "John Doe",
  descr: "Lorem ipsum dolor sit amet",
  role: "admin"
};
</script>

<template>
  <Willow>
    <Editor :items="items" :values="values" />
  </Willow>
</template>
노트

올바른 초기화를 위해 애플리케이션의 최상위 레벨에 테마를 적용하는 것을 권장합니다. Editor 컴포넌트를 단독으로 사용하는 경우, 반드시 테마로 감싸는 것을 잊지 마세요 (위 예제에서는 Willow 테마가 적용되어 있습니다).

관련 문서: