Ant Design Vue Nuxt 模块

✨ 发布说明

特性

✨ 按需自动导入组件。
✨ 自动从 @ant-design/icons-vue 导入图标。
✨ 自动导入 message、notification 和 Modal 方法。

快速上手

将 @ant-design-vue/nuxt 依赖添加到你的项目

npx nuxi@latest module add ant-design-vue

将 @ant-design-vue/nuxt 添加到 nuxt.config.ts 的 modules 部分

export default defineNuxtConfig({
  modules: [
    '@ant-design-vue/nuxt'
  ],
  antd:{
    // Options
  }
})

搞定啦! 现在你可以在你的 Nuxt 应用中使用 ant-design-vue 了 ✨

用法

在线 Playground

<script lang="ts" setup>
const handleMessage = () => {
  message.info("This is a normal message");
}
</script>
<template>
  <a-button @click="handleMessage">
    button
  </a-button>
</template>

参考 Nuxt 文档和 playground 用法。

选项

components (组件)

类型: array | 'false'

如果有些组件没有从 Ant Design Vue 自动导入，你需要在这里添加组件名称。

例如: ['Button']

imports (导入)

类型: array

如果你希望从 Ant Design Vue 自动导入内容，你可以在这里添加。

icons (图标)

类型: array | 'false'

如果有些组件没有从 @ant-design/icons-vue 自动导入，你需要在这里添加组件名称。

extractStyle (1.4.1) (提取样式)

类型: boolean

解决页面 CSS 闪烁问题

按需提取和注入 CSS，默认为 false

<!-- If the extractStyle option is enabled, we can use a-extract-style on the outermost level of the template in app.vue -->
<template>
  <a-extract-style>
    <!-- Your page or component -->
  </a-extract-style>
</template>

开发

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Build for production
npm run build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release