蚂蚁设计 Vue Nuxt

蚂蚁设计Vue 模块 坚果

• QQ 发布注释

特征

• * 应要求自动导入组件.
• 自动导入图标 @ant-deign/icons-vue (英语)。 。 。 .
• * 自动导入信件、通知和模块方法.

快速设置

1. 添加 @ant-design-vue/nuxt 对您的项目的依赖性

npx nuxi@latest module add ant-design-vue

2. 添加 @ant-design-vue/nuxt 页:1 modules 节 nuxt.config.ts

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

就这样! 您现在可以在您的 Nuxt app 中使用 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 文档 财务报告和审定财务报表 游乐场 使用时.

选项

组件

• 类型 : array "虚"

如果有组件并非从Ant Design Vue自动导入,则需要在此添加组件名称.

譬如说.['Button']

进口

• 类型 : array

如果您想要从 Ant Design Vue 自动导入内容, 您可以在此添加 .

图标

• 类型 : array "虚"

如果有组件不是从@ant-dedesign/icons-vue自动导入的,需要在此添加组件名.

提取Style (1.4.1)

• 类型 : boolean

解决页面 css 闪烁问题

按需提取并注入 cs, 默认为虚假

<!-- 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