# @craft-native/vue 中文文档

规范地址：https://npmcn.com/package/%40craft-native/vue/

版本：0\.0\.413
npm 元数据更新时间：2026-10-31T21:02:00.083Z
中文译文更新时间：2026-10-31T21:16:07.955Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40craft-native/vue
原文对照：https://npmcn.com/package/%40craft-native/vue/?lang=original
项目主页：https://github.com/craft-native/craft/tree/main/packages/vue#readme
源码仓库：https://github.com/craft-native/craft

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：49.7 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue ^3\.0\.0
- 首次发布：2026-08-23T01:42:04.418Z
- 最新版本发布：2026-10-31T21:01:59.732Z
- 已发布版本数：212（近 12 个月 212 个）

## 中文简介

用于Craft框架的Vue 3绑定

## 安装

```sh
npm install @craft-native/vue
```

也可以使用：`pnpm add @craft-native/vue`、`yarn add @craft-native/vue`、`bun add @craft-native/vue`

## README

# @craft-native / vue

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

## 安装

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

## 使用

### 核心可组合

#### useCraft

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

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

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

#### usePlatform

```vue
<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

```vue
<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>
```

### 窗口管理

```vue
<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>
```

### 文件系统

```vue
<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>
```

### 数据库

```vue
<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请求

```vue
<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>
```

### 事件

```vue
<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>
```

### 公用事业公司

```vue
<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组件中使用。

看到 [打印稿定义](https://npmcn.com/package/%40craft-native/vue/dist/index.d.ts) 获取完整的API文档。

## 许可证

麻省理工学院

## 常见问题

### @craft-native/vue 是什么？

用于Craft框架的Vue 3绑定

### 如何安装 @craft-native/vue？

在项目目录运行 npm install @craft-native/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @craft-native/vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @craft-native/vue 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @craft-native/vue 可以商用吗？

@craft-native/vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @craft-native/vue 还在维护吗？

最新版本 0\.0\.413 发布于 2026/11/01（2 天前）；至今共发布 212 个版本，其中过去 12 个月发布了 212 个；首次发布于 2026/08/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。