애플리케이션 개발자용

Vue 통합

플러그인으로 하나의 런타임을 연결하거나 제공한 다음 컴포저블을 통해 변경 불가능한 스냅샷을 읽습니다.

마운트하기 전에 Bootstrap를 설치한 후 플러그인을 설치하세요.

import { createApp } from "vue";
import { createOriaTheme } from "@oriatheme/vue";
import { bootstrapTheme } from "@oriatheme/runtime-dom";
import { oriaPresetThemes } from "@oriatheme/presets";
import App from "./App.vue";

bootstrapTheme({ contract: { name: "oria-standard", version: 2 } });
createApp(App)
  .use(createOriaTheme({ presets: oriaPresetThemes, defaultThemeId: "oria-default" }))
  .mount("#app");

하위 항목에서 컴포저블 사용

vue

<script setup lang="ts">
import { useOriaTheme } from "@oriatheme/vue";

const { snapshot, setAppearance, setTheme } = useOriaTheme();
</script>

<template>
  <p>{{ snapshot.preference.activeThemeId }} / {{ snapshot.resolvedMode }}</p>
  <button @click="setTheme('oria-ocean')">Ocean</button>
  <button @click="setAppearance('system')">System</button>
</template>

스냅샷은 런타임을 구독하는 얕은 참조입니다. Vue 스토어의 테마, 모양 또는 해결 모드를 미러링하지 마세요.

편집기가 닫혀 있는 동안에는 편집기를 로드하지 마십시오.

CLI가 설치된 로컬 ThemeEditor를 로드하고 열릴 때만 렌더링하려면 정의AsyncComponent를 사용하십시오. 로컬 편집기 항목은 자체 CSS를 가져옵니다. 글로벌 CSS에서 정적으로 가져오지 마십시오.

계속: 맞춤 테마 만들기 및 가져오기