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 了 ✨

使用

在线示例

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

参考 Nuxt 文档和示例进行使用。

选项

components

类型: 数组 | 'false'

如果有一些组件没有从 Ant Design Vue 自动导入，则需要在此处添加组件名称。

例如: ['Button']

imports

类型: 数组

如果您希望从 Ant Design Vue 自动导入内容，可以将其添加到此处。

icons

类型: 数组 | 'false'

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

extractStyle (1.4.1)

类型: 布尔值

解决页面 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