@craft-native / vue

用于Craft框架的Vue 3复合API绑定。

安装

npm install @craft-native/vue
# or
yarn add @craft-native/vue
# or
pnpm add @craft-native/vue

使用

核心可组合

useCraft

<script setup>
import { useCraft } from '@craft-native/vue';

const { craft, isReady } = useCraft();
</script>

<template>
  <div v-if="isReady">Craft is ready!</div>
</template>

usePlatform

<script setup>
import { usePlatform } from '@craft-native/vue';

const { platform, loading } = usePlatform();
</script>

<template>
  <div v-if="!loading">
    <p>Platform: {{ platform?.platform }}</p>
    <p>Version: {{ platform?.version }}</p>
  </div>
</template>

useToast

<script setup>
import { useToast } from '@craft-native/vue';

const { showToast } = useToast();

const handleClick = () => {
  showToast('Hello from Vue!', 'short');
};
</script>

<template>
  <button @click="handleClick">Show Toast</button>
</template>

窗口管理

<script setup>
import { useWindow } from '@craft-native/vue';

const { maximize, minimize, toggleFullscreen, isFullscreen } = useWindow();
</script>

<template>
  <div>
    <button @click="maximize">Maximize</button>
    <button @click="minimize">Minimize</button>
    <button @click="toggleFullscreen">
      {{ isFullscreen ? 'Exit' : 'Enter' }} Fullscreen
    </button>
  </div>
</template>

文件系统

<script setup>
import { ref } from 'vue';
import { useFileSystem } from '@craft-native/vue';

const { readFile, writeFile, loading } = useFileSystem();
const content = ref('');

const load = async () => {
  content.value = await readFile('/path/to/file.txt');
};

const save = async () => {
  await writeFile('/path/to/file.txt', content.value);
};
</script>

<template>
  <div>
    <textarea v-model="content" />
    <button @click="load">Load</button>
    <button @click="save">Save</button>
    <div v-if="loading">Loading...</div>
  </div>
</template>

数据库

<script setup>
import { ref, onMounted } from 'vue';
import { useDatabase } from '@craft-native/vue';

const { query, execute } = useDatabase('/path/to/db.sqlite');
const todos = ref([]);

onMounted(async () => {
  todos.value = await query('SELECT * FROM todos');
});

const addTodo = async (title) => {
  await execute('INSERT INTO todos (title) VALUES (?)', [title]);
  todos.value = await query('SELECT * FROM todos');
};
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
  </ul>
</template>

HTTP请求

<script setup>
import { ref } from 'vue';
import { useHttp } from '@craft-native/vue';

const { fetch: httpFetch, loading } = useHttp();
const data = ref(null);

const loadData = async () => {
  data.value = await httpFetch('https://api.example.com/data');
};
</script>

<template>
  <div>
    <button @click="loadData" :disabled="loading">Load Data</button>
    <pre v-if="data">{{ JSON.stringify(data, null, 2) }}</pre>
  </div>
</template>

事件

<script setup>
import { useCraftEvent } from '@craft-native/vue';

useCraftEvent('app.ready', () => {
  console.log('App is ready!');
});

useCraftEvent('window.close', () => {
  console.log('Window is closing');
});
</script>

公用事业公司

<script setup>
import { useIsMobile, useIsDesktop } from '@craft-native/vue';

const isMobile = useIsMobile();
const isDesktop = useIsDesktop();
</script>

<template>
  <div>
    <div v-if="isMobile">Mobile View</div>
    <div v-if="isDesktop">Desktop View</div>
  </div>
</template>

API参考

所有可组合组件都是使用Vue 3的组合API构建的。它们返回反应性refs，可以在任何Vue 3组件中使用。

看到 打印稿定义 获取完整的API文档。

许可证

麻省理工学院