# @chillet/m3-vue 中文文档

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

版本：0\.53\.1
npm 元数据更新时间：2026-10-31T08:52:19.673Z
中文译文更新时间：2026-11-09T18:39:03.691Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40chillet/m3-vue
原文对照：https://npmcn.com/package/%40chillet/m3-vue/?lang=original
源码仓库：https://github.com/chillet-moe/m3-vue

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

- 包体积（解压后）：4.9 MB，1169 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：vue ^3\.5\.0，@nuxt/kit ^4\.4\.2，@vueuse/core ^14\.1\.0
- 首次发布：2026-07-16T11:20:21.423Z
- 最新版本发布：2026-10-31T08:52:19.517Z
- 近 30 天下载量：1888（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：36（近 12 个月 36 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @chillet/m3-vue
```

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

## README

# 材料设计网络 - Vue 3

Vue 3 组件库,执行材料设计 3(Matrial You).

> m3-vue 的构建启用 `@chillet/vue-scope-boundary` 用于范围化的SFC样式。 它防止正 HTML 类型选择器, 如 `button` 财务报告和审定财务报表 `button.primary` 通过 Vue 复制的父范围 ID 来匹配子组件根。 类,ID,和属性选择者保持了Vue的正常行为. 不需要 Vue 运行时补丁 。 见 [`docs/guides/vue-scope-isolation.md`](https://npmcn.com/package/%40chillet/m3-vue/docs/guides/vue-scope-isolation.md)。 。 。 .

## 安装

```bash
npm install @chillet/m3-vue
# or
pnpm add @chillet/m3-vue
# or
yarn add @chillet/m3-vue
```

## 贷项

这些项目值得启发和参考:

-   [https://github.com/KTibow/m3-svelte (英语)](https://github.com/KTibow/m3-svelte) - 一些执行
-   [https://github.com/zdhxiong/mdui (中文(简体) )](https://github.com/zdhxiong/mdui) - 一些执行
-   [https://github.com/makmn1/材料-设计-托肯-gen](https://github.com/makmn1/material-design-token-gen) -- MD3 导弹 托肯斯语( T)`/reference-tokens`(中文(简体) )
-   [https://github.com/melt-ui/next-gen (中文(简体) )](https://github.com/melt-ui/next-gen) - 构建者模式的想法

## 自动导入( unplugin- vue- 组件)

```ts
// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import { M3VueResolver } from '@chillet/m3-vue';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [M3VueResolver()],
    }),
  ],
});
```

如果您在 `src/components`,同时更新 `src/resolver.ts`。 。 。 .

## 插件

```ts
import { createApp } from 'vue';
import { M3VuePlugin } from '@chillet/m3-vue';
import App from './App.vue';

const app = createApp(App);

app.use(M3VuePlugin);
app.mount('#app');
```

注册后,您可以使用 `v-tooltip`, (中文(简体) ), `v-dropdown`, (中文(简体) ), `v-dropdown-menu`,以及 `v-context-menu` 直接在模板中.

一号 `OverlayHost` 使用程序时接近应用程序根 `showDialog()` 或者说 `showSnackbar()` 函数。 在后人组件中,抓取 `const { showDialog, showSnackbar } = useOverlays()` 设置和继续使用时 `showDialog(options)` 编号 : `showSnackbar(options)`外部组件,使用 `createOverlayService(host)` 绑定函数一次。 无须声明 `Dialog` 或者说 `Snackbar` 组件.

```vue
<script setup lang="ts">
import { OverlayHost, createOverlayHost, provideOverlayHost } from '@chillet/m3-vue';
const overlays = provideOverlayHost(createOverlayHost());
</script>

<template>
  <OverlayHost :host="overlays" />
  <!-- Your application content -->
</template>
```

## 坚果

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@chillet/m3-vue/nuxt'],
});
```

默认情况下, Nuxt 模块将:

-   注册所有组件用于自动导入
-   添加共享 `@chillet/m3-vue/style.css` 财务报告和审定财务报表 `@chillet/m3-vue/themes/default.css` 改为 `css`
-   安装 `M3VuePlugin` 这样 `v-tooltip`, (中文(简体) ), `v-dropdown`, (中文(简体) ), `v-dropdown-menu`,以及 `v-context-menu` 备有

你可以自定义它 `m3Vue`数字 :

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@chillet/m3-vue/nuxt'],
  m3Vue: {
    prefix: 'M3',
    imports: true,
  },
});
```

## 常见问题

### 如何安装 @chillet/m3-vue？

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

### @chillet/m3-vue 支持 TypeScript 吗？

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

### @chillet/m3-vue 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @chillet/m3-vue 可以商用吗？

@chillet/m3-vue 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @chillet/m3-vue 的下载量有多少？

根据 npm 官方下载统计，@chillet/m3-vue 在 2026/10/10 – 2026/11/08 这 30 天内被下载 1,888 次，日均约 63 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @chillet/m3-vue 还在维护吗？

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