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